New! Infinite Scroll v3 · Back & refresh button friendly

fitRows

Items are arranged into rows. Rows progress vertically. Similar to what you would expect from a layout that uses CSS floats.

fitRows is ideal for items that have the same height.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Edit this demo on CodePen

Options

gutter

Adds horizontal space between item elements.

layoutMode: 'fitRows',
fitRows: {
  gutter: 10
}

Use element sizing for responsive layouts with percentage widths. Set gutter to an Element or Selector String to use the outer width of the element as the size of the gutter.

<div class="grid">
  <!-- .gutter-sizer empty element, only used for element sizing -->
  <div class="gutter-sizer"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item"></div>
  ...
</div>
/* fluid 4 columns */
.grid-item { width: 22%; }
/* fluid 4% gutter */
.gutter-sizer { width: 4%; }

.grid-item--width2 { width: 48%; }
layoutMode: 'fitRows',
itemSelector: '.grid-item',
percentPosition: true,
fitRows: {
  gutter: '.gutter-sizer'
}