Layout modes

Isotope has a versatile layout engine that can accommodate multiple layout modes. You can set and change the layout mode via the layoutMode option.

See Demo: Layout modes

Example

$('#container').isotope({ layoutMode : 'fitRows' });

Several layout modes are built into Isotope.

Horizontal layouts

Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and straightAcross) need a container that has a height value. Be sure that your CSS has height set.

#container {
  /* either of these will work for horizontal Isotope layouts */
  height: 80%;
  height: 480px;
}

cellsByColumn

A horizontal grid layout where items are centered inside each cell. The grid is defined by two options, columnWidth and rowHeight. The horizontal equivalent of cellsByRow.

Options

columnWidth
Integer
rowHeight
Integer

Example

$('#container').isotope({
  layoutMode: 'cellsByColumn',
  cellsByRow: {
    columnWidth: 240,
    rowHeight: 360
  }
});

cellsByRow

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

Options

columnWidth
Integer
rowHeight
Integer

Example

$('#container').isotope({
  layoutMode: 'cellsByRow',
  cellsByRow: {
    columnWidth: 240,
    rowHeight: 360
  }
});

fitColumns

Item elements are arranged into columns. Columns progress horizontally from left to right. Items within those columns are arranged top-to-bottom. The horizontal equivalent of fitRows.

fitRows

Item elements are arranged into rows. Rows progress vertically top to bottom. Similar to what you would expect from a layout that uses float: left.

masonry

Masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a vertical grid. For each item element, the script calculates the next best fit for the item within the grid.

Options

columnWidth
Integer

The width of one column in the grid. If no value is set for columnWidth, default is the width of the first item element.

Example

$('#container').isotope({
  masonry: {
    columnWidth: 240
  }
});

masonryHorizontal

The horizontal equivalent of masonry layout. Instead of progressing top-to-bottom, masonryHorizontal layout will progress left-to-right. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid.

Options

rowHeight
Integer

The width of one column in the grid. If no value is set for rowHeight, default is the height of the first item element.

Example

$('#container').isotope({
  masonryHorizontal: {
    rowHeight: 360
  }
});

straightAcross

Item elements are arranged horizontally left to right. Useful for simple lists.

straightDown

Item elements are arranged vertically top to bottom. Useful for simple lists.

Modified layout modes

Isotope’s methods can be extended and overwritten to shim-in additional functionality. See these modified layout modes:

To use these mods, copy the revised methods found in the demos’ page source. They look like:

$.Isotope.prototype._masonryReset = function() {
  // modified code..
};