cssjquery-masonrymasonryimagesloaded

Masonry Grid Broken Layout when Initializing

I am using masonry grid to have an image layout that goes as follows:

1st row - two images 50/50%

2nd row- three images 33.33/33.33/33.33%

3rd row - two images 50/50%

Before initializing and just styling via CSS, the layout works nicely. After initializing, with or without imagesloaded, it breaks the layout.

http://codepen.io/byoungz/pen/JXOKqW

    .grid-sizer,
    .grid-item {
        width: 33.33%;
    }

If I change above to 25%, the three columns images line up nicely leaving a space for a fourth image. The 50% width images get moved to top and bottom accordingly.

If I remove the two items at 50% and just leave the 33.33% items, they seem to line up in a row nicely.

Is it just not possible to have this layout? I have gotten many others to work easily.

Solution

  • I figured out what my issue is. I failed to realize when using percentages that each grid item must be DIVISIBLE by column width.

    Changing:

        .grid-sizer,
    .grid-item {
        width: 33.33%;
    }

    to 

    .grid-sizer {
   width: 16.667%;
 }
.grid-item {
    width: 33.33%;
}

    solved my issue.