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
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'
}