javascript - Issue With Responsive Masonry Layout

Question

I am using Masonry for the layout of my website, everything works fine, but there is an issue with a responsiveness. At the moment all elements are set to a width of 31.8% (also have some margins etc..) I was assuming that by resizing a browser window I will still keep 3 columns, but all element's would just decrease in width, however that was not the case, by resizing a window everything starts falling apart, I can't tell where this strange behaviour is coming from.

You can see my live demo site here: http://freshbeer.lv/test/index.html

I really don't know what is causing that strange behaviour, so I don't know which bit's of code to post here, if you know what bits could cause it, tell me and I'll add it here.

Edit: Interestingly, after resizing it and refreshing the window, it looks better, but not exactly correct.

Also I am trying to achieve something similar to this http://tympanus.net/codrops/collective/collective-57/

Answer 1

Try setting the width in Masonry too:

$('.grid').masonry({
  itemSelector: '.content-box',
  columnWidth: function(width) {
    return width * (31.8 / 100);
  }
});