Isotope v2 beta (back to V1)

Changes from Isotope v1. Report any issues with Isotope v2. Thanks for being brave!

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({ layoutMode : 'fitRows' });

1

2

3

4

5

6

7

8

9

10

11

12

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

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'