Masonry gaps appearing when enlarging browser window

[crazylegs03]

Hi, I’m working on a masonry grid. It has 5 columns and goes down to 3 when reducing the browser window. In Chrome it gracefully converts to the 3 columns when reducing the window size but when you enlarge it again large gaps appear when going back to 5 columns. Why is this and is there a way to improve the experience?

Here’s my codepen:
http://codepen.io/anon/pen/ZpVGQW

Thank you for any help.

[bearhead]

My guess would be that the widths for the elements aren’t whole numbers and it is just a result of how chrome renders fractional pixel values. I don’t really have any advise on how to fix it though…

This post on Masonry’s github repository seems related:
https://github.com/desandro/masonry/issues/475

[Author]

Posts