isotope/_posts/docs/2010-12-05-layout-modes.mdown

---

title: Layout Modes
category: docs
layout: doc
body_class: option-def
related: layout
toc:
  - { title: masonry, anchor: masonry }
  - { title: fitRows, anchor: fitrows }
  - { title: cellsByRow, anchor: cellsbyrow }
  - { title: masonryHorizontal, anchor: masonryhorizontal }
  - { title: fitColumns, anchor: fitcolumns }
  - { title: cellsByColumn, anchor: cellsbycolumn }
  - { 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 %}

Six layout modes are built into Isotope.

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

<dl class="clearfix">
  <dt><code>columnWidth</code></dt>
  <dd class="option-type">Integer</dd>
</dl>

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

## fitRows

Item elements are arranged into rows. Similar to what you would expect from a layout that uses `float: left`

## cellsByRow

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

### Options {#cellsByRow-options}

<dl class="clearfix">
  <dt><code>columnWidth</code></dt>
  <dd class="option-type">Integer</dd>
</dl>
<dl class="clearfix">
  <dt><code>rowHeight</code></dt>
  <dd class="option-type">Integer</dd>
</dl>

### Example {#cellsByRow-example}

{% highlight javascript %}

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

{% 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}

<dl class="clearfix">
  <dt><code>rowHeight</code></dt>
  <dd class="option-type">Integer</dd>
</dl>

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

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

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

<dl class="clearfix">
  <dt><code>columnWidth</code></dt>
  <dd class="option-type">Integer</dd>
</dl>
<dl class="clearfix">
  <dt><code>rowHeight</code></dt>
  <dd class="option-type">Integer</dd>
</dl>

### Example {#cellsByColumn-example}

{% highlight javascript %}

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

{% endhighlight %}

## 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 %}