Layout modes

Isotope has a versatile layout engine allowing you to position items with different layout logic. Set and change layout mode with the layoutMode option.

$container.isotope({...})

Layout mode options

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

var $container = $('#container').isotope({
  // main isotope options
  itemSelector: '.item',
  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 horizontal) 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 modes

masonry, fitRows, and vertical are included in isotope.pkgd.js and if you install Isotope via Bower. All other layout modes need to installed separately.

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 is ideal for items that have the same height.

See fitRows layout mode docs.

layoutMode: 'fitRows'

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 docs.

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

vertical

Items are stacked vertically.

See vertical layout mode docs.

layoutMode: 'vertical'

masonryHorizontal

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

See masonryHorizontal layout mode docs.

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

fitColumns

Items are arranged into columns. Columns progress horizontally.

fitColumns is ideal for items that have the same width.

See fitColumns layout mode docs.

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 docs.

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

horizontal

Items are arranged horizontally.

See horizontal layout mode docs.

layoutMode: 'horizontal'