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

---

title: Layout Modes
category: docs
layout: doc
body_class: option-def

---

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 Example: 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

<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

{% 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. The grid is defined by two options, `columnWidth` and `rowHeight`.

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

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

<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

{% 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. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of 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

{% highlight javascript %}

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

{% endhighlight %}