Layout modes

Isotope can position items with different layout modes. Set and change the layout mode with the layoutMode option.

$grid.isotope({...})

Layout mode options

Layout modes can have their own separate options. These are set in a corresponding object within the options.

var $grid = $('.grid').isotope({
  // main isotope options
  itemSelector: '.grid-item',
  // set layoutMode
  layoutMode: 'cellsByRow',
  // options for cellsByRow layout mode
  cellsByRow: {
    columnWidth: 200,
    rowHeight: 150
  },
  // options for masonry layout mode
  masonry: {
    columnWidth: '.grid-sizer'
  }
})

Horizontal layouts

Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and horiz) 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;
}

Included layout modes

masonry, fitRows, and vertical are included in Isotope by default. All other layout modes need to installed separately.

Layout modes

masonry

The default layout mode. Items are arranged in a vertically cascading grid.

See masonry layout mode.

masonry: {
  columnWidth: 50
}

fitRows

Items are arranged into rows. Rows progress vertically. Similar to what you would expect from a layout that uses CSS floats. fitRows works well for items that have the same height.

See fitRows layout mode.

layoutMode: 'fitRows'

vertical

Items are stacked vertically.

See vertical layout mode.

layoutMode: 'vertical'

packery

The packery layout mode uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” It works similarly to masonry, except gaps will be filled.

See packery layout mode.

layoutMode: 'packery'

cellsByRow

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

See cellsByRow layout mode.

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

masonryHorizontal

Horizontal version of masonry. Items are arranged in a horizontally cascading grid.

See masonryHorizontal layout mode.

layoutMode: 'masonryHorizontal',
masonryHorizontal: {
  rowHeight: 50
}

fitColumns

Items are arranged into columns. Columns progress horizontally.

fitColumns works well with items that have the same width.

See fitColumns layout mode.

layoutMode: 'fitColumns'

cellsByColumn

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

See cellsByColumn layout mode.

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

horiz

Items are arranged horizontally.

See horiz layout mode.

layoutMode: 'horiz'