Currently, I am developing a project that requires a responsive masonry layout. The container has a maximum width set to 960px, but it is supposed to adjust based on the browser's size. Each grid item has a percentage-based width (100%, 66.666666etc%, 33.33333etc%). Strangely, when I assign a function to the columnWidth option, it consistently gives the container a height of 0. Here is how I am setting up 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
});
});
I am puzzled as to why this behavior is occurring. Using $(window).load should allow for proper height calculations. Am I overlooking something obvious? Could it be that Masonry does not support percentage-based column widths?