--- title: Layout modes category: docs layout: doc body_class: option-def related: layout toc: - { title: cellsByColumn, anchor: cellsbycolumn } - { title: cellsByRow, anchor: cellsbyrow } - { title: fitColumns, anchor: fitcolumns } - { title: fitRows, anchor: fitrows } - { title: masonry, anchor: masonry } - { title: masonryHorizontal, anchor: masonryhorizontal } - { title: Horizontal layouts, anchor: horizontal_layouts } --- 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**](../demos/layout-modes.html) ### Example {% highlight javascript %} $('#container').isotope({ layoutMode : 'fitRows' }); {% endhighlight %} Several layout modes are built into Isotope. ## cellsByColumn A 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 {#cellsByColumn-options}
columnWidth
Integer
rowHeight
Integer
### Example {#cellsByColumn-example} {% highlight javascript %} $('#container').isotope({ layoutMode : 'cellsByColumn', cellsByRow : { columnWidth : 240, rowHeight : 360 } }); {% endhighlight %} ## cellsByRow A grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`. ### Options {#cellsByRow-options}
columnWidth
Integer
rowHeight
Integer
### Example {#cellsByRow-example} {% highlight javascript %} $('#container').isotope({ layoutMode : 'cellsByRow', cellsByRow : { columnWidth : 240, rowHeight : 360 } }); {% endhighlight %} ## fitColumns Item elements are arranged into columns. The horizontal equivalent of fitRows. Columns progress from left to right. Items within those columns are arranged top-to-bottom. ## fitRows Item elements are arranged into rows, left to right. Rows progress 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 grid. For each item element, the script calculates the next best fit for the item within the grid. ### Options {#masonry-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 {#masonry-example} {% highlight javascript %} $('#container').isotope({ masonry : { columnWidth : 240 } }); {% endhighlight %} ## 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 {#masonryHorizontal-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 {#masonryHorizontal-example} {% highlight javascript %} $('#container').isotope({ masonryHorizontal : { rowHeight : 360 } }); {% endhighlight %} ## straightDown Item elements are arranged vertically top to bottom. Useful for simple lists. ## Horizontal layouts Horizontal layout modes (masonryHorizontal, fitColumns, and cellsByColumn) need a container that has a height value. Be sure that your CSS has height set. {% highlight css %} #container { /* either of these will work for horizontal Isotope layouts */ height: 80%; height: 480px; } {% endhighlight %}