Isotope

  1. Filtering
  2. Sorting
  3. Layout
  4. Layout modes
  5. Options
  6. Methods
  7. Events
  8. Extras
  9. License
  10. FAQ

cellsByRow

A grid layout where items are centered inside each cell. The grid is defined by columnWidth and rowHeight options.

1
2
3
4
5
6
7
8
9
10
11
12

Edit this demo on CodePen

Install

This layout mode is not included in isotope.pkgd.js and must be installed separately.

Download cells-by-row.js on GitHub.

Install with Bower:

bower install isotope-cells-by-row

Install with npm:

npm install isotope-cells-by-row

Options

columnWidth

The width of a column of the horizontal grid.

If columnWidth is not set, the outer width of the first element will be used.

layoutMode: 'cellsByRow',
cellsByRow: {
  columnWidth: 110,
  rowHeight: 110
}

Edit this demo on CodePen

If set to an Element or Selector String, Isotope will use the width of that element. See Element sizing. Setting columnWidth with element sizing is recommended if you are using percentage widths or media queries to change the size of items.

layoutMode: 'cellsByRow',
itemSelector: '.item',
percentPosition: true,
cellsByRow: {
  columnWidth: '.grid-sizer',
  rowHeight: '.grid-sizer'
}

/* isotope element option sizing */
.grid-sizer {
  width: 25%;
  height: 110px;
}

Edit this demo on CodePen

rowHeight

The width of a column of the vertical grid.

If set to an Element or Selector String, Isotope will use the height of that element. See Element sizing. Setting rowHeight with element sizing is recommended if you are using media queries to change the size of items.

If rowHeight is not set, the outer height of the first element will be used.

See examples above.