Fluid grid with gutter?

[metafizzy]

Fluid grid with gutter?

[desandro]

Good question! See http://codepen.io/desandro/pen/pBlIw

options

{ "gutter": ".gutter-sizer", "itemSelector": ".item", "columnWidth": ".grid-sizer" }

CSS

.gutter-sizer { width: 2%; }
.grid-sizer { width: 18.4%; }
.item { width: 18.4%; }

Setting columnWidth helps. While it's not required, it helps with fluid/percentage-based widths, to resolve rounding errors.

[netwire88]

Hi @desandro , just to clarify, if I have fluid width, and I'd like 2 columns per row and 2% gutter, I'd use 100% - 2% / 2 = 49% for each column width?

[desandro]

@netwire88 Yes! See http://codepen.io/desandro/pen/myOwNY

[notflip]

Any idea how to get this working with 3 columns? I can't seem to get it right with the above formula.
Thank you

[desandro]

I've got to update the docs. Until then, take a look at the gutter demo for Packery with Isotope: http://codepen.io/desandro/pen/fGrKe

Using Packery, the options would look like:

$('.grid').packery({
  itemSelector: '.grid-item',
  percentPosition: true,
  gutter: '.gutter-sizer'
});