When I first delved into using Isotope with Masonry layouts, I encountered quite a struggle similar to what you're facing.
A fundamental concept in an Isotope/Masonry layout is the vertical spacing between grid items known as the gutter, eliminating the need for left/right margins altogether.
To illustrate, consider a scenario with a grid of nine items arranged over three columns with a 2% gap between each item. An effective approach involves creating "reference elements” within our HTML which serve as templates for defining both the grid item size and gutter size. Here's how we can set it up:
<div id="grid">
<div class="item-sizer"></div>
<div class="gutter-sizer"></div>
<div class="grid-item"></div>
...
</div>
We then proceed to style these "sizer" elements in our CSS, setting specific widths that will be read by Isotope during initialization. The CSS looks like this:
.item-sizer {
width: 32%;
}
.gutter-sizer {
width: 2%;
}
.grid-item {
width: 32%;
}
The .item-sizer defines column width while the .gutter-sizer specifies gutter width. Calculating these values involves some simple math:
In a 3-column layout, two vertical gaps are present, each occupying 2%. Subtracting the total gap space from 100%, we have 96% remaining to distribute evenly among the columns, resulting in 32% width per column.
Your Isotope call should now reference these CSS selectors to appropriately size the grid and gutters:
$('#grid').isotope({
itemSelector: '.grid-item',
percentPosition: true,
masonry: {
columnWidth: '.item-sizer',
gutter: '.gutter-sizer'
}
});