Home › Forums › CSS › CSS Masonry grid gallery › Reply To: CSS Masonry grid gallery
First on the last example: my fork of that demo
Note in the javascript the added value on the “gutter” property for horizontal margins:
$('.grid').isotope({
itemSelector: '.grid-item',
masonry: {
columnWidth: 400,
gutter: 10,
isFitWidth: true
}
});
For vertical margins we have to use CSS, here:
.grid-item {
/* stuff */
margin-bottom: 10px;
}
In the HTML I added an extra wrapper .container div, with a fixed width, to make the math work out. So 3 x grid-item (400px) + (2 x 10px) margin = width ( + 20px padding = 1240px width) for .container. This is because the Masonry javaScript calculates width from the outer element.
If you want to go full-width (100% width of browser window), then it is not possible to have a fixed number of “columns” (it’s more like pseudo – or visual columns BTW) with Masonry. Could try the new grid-layout module for that and/or inline-block/flexbox for that matter, that will work better for this.
On the first example; have you also tried to edit those values within the media-queries?