Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Masonry grid gallery Reply To: CSS Masonry grid gallery

#253222
Atelierbram
Participant

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?