Masonry giving container 0 height

Question

I'm working on some stuff that involves a responsive masonry layout. I have a container that has a max-width of 960px but scales down with the browser. My grid items have a percentage-based width (100%, 66.666666etc%, 33.33333etc%). For some reason, when I pass a function to the columnWidth option, it always gives the container a height of 0. This is how I'm instantiating Masonry.

$(window).load(function() {
  var $container;
  $container = $("#grid_container");
  $container.masonry({
    columnWidth: function(containerWidth) {
      return containerWidth / 3;
    },
    itemSelector: ".grid_item",
    isFitWidth: true,
    isResizable: true,
    gutter: 10
  });
});

Any idea why it'd be doing this? Since I'm using $(window).load it should be able to calculate the height fine. Am I missing something really obvious here? Is it simply not possible to use percentage column widths with Masonry?

Answer 1

In Masonry, a function type isn't a permitted value for the columnWidth property.

Try instead to:

1. Pass a CSS selector (e.g., .grid_box) as the columnWidth property.
2. In CSS, add the selector to the appropriate percentage width of its parent container (e..g, .grid_box{ width: 20%; }).
3. To your HTML, add an empty <div class="grid_box"></div> to the container.