Masonry / Isotope keeps its order in this specific case, why?

Question

I'm working with Masonry and not getting the expected results.

See the following Pen: http://codepen.io/anon/pen/VLrjme

Why does box number 5 not move to the upper-right corner, next to number 3? There is enough space there and to my understanding this is what Masonry does.

Also, if I change the height of some of the boxes using css, for example like so:

.grid__item:nth-child(odd)
 {
   height: 100px;
 }

It shows the same issue, not all white-space is filled with fitting boxes.

EDIT: updated the Pen by including jQuery following Macsupport's remark (thanks for the heads up!) and the issue has been solved for the first case, however, it is not solved in my project, so I updated the Pen to reflect my project better by also using percentage-values for the sizes. Now I have the same problem - 5 does not go next to 3...

EDIT 2: if I try it with more columns I can get it to work, so the problem is in the 2-column layout. It is not rounding - I have already tested with 49,5% widths and even 45% - the grid seems to break as soon as there are 2 columns intended. Is a 2-column layout not possible? Even when I use absolute values (no %), the 2-column layout breaks.

Answer 1

You are calling masonry using jQuery but you are not loading jQuery in your codepen, so masonry fails with an error. It needs to be loaded before masonry.

Answer 2

I have also consulted the owner of the Masonry plugin and apparently this 'issue' is normal behaviour - I quote:

"Gaps may occur in Masonry layouts. If you prefer for gaps like this to be filled, use Packery."

And indeed, Packery did provide an outcome for me in this situation by also filling the grid in a 2-column layout (the 3 or more column layouts/breakpoints already worked fine in Masonry), so I'm going with Packery on this one.