After activating Masonry on the parent element, which is an unordered list containing modified list items with margin-bottom and margin-right displayed in a pink-ish color using Chrome's F12 DEV tools, I encountered the following issue:
Despite the CSS styling for each list item specifying background colors, borders, floats, padding, positions, widths, and margins, the desired layout does not occur upon document load. The CSS code for each list item is as follows;
li {
background-color: #fff;
border: 1px solid #dfdfdf;
float: left;
padding: 20px;
position: relative;
width: calc(50% - 10px);
margin-right: 10px;
margin-bottom: 10px;
}
To address this issue, I utilized the following jQuery code;
$(document).ready(function(){
$("ul").masonry({
itemSelector: 'li'
});
});
However, upon resizing the window horizontally, the CSS styles take effect as intended;
Is there any solution to achieve the desired layout upon page load?
UPDATE*
Check out the JSFiddle link here: Click here. If the issue does not appear, try clicking the 'Run' button (Ctrl + Return).