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

---

title: Layout modes
category: docs
layout: default
body_class: option-def
toc:
  - { title: Horizontal layouts, anchor: horizontal_layouts }
  - { 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: straightAcross, anchor: straightacross }
  - { title: straightDown, anchor: straightdown }
  - { title: Modified layout modes, anchor: modified_layout_modes }

---

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.

### Horizontal layouts

Horizontal layout modes (masonryHorizontal, fitColumns, cellsByColumn, and straightAcross) 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 %}

## cellsByColumn

A **horizontal** 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: 'cellsByColumn',
  cellsByRow: {
    columnWidth: 240,
    rowHeight: 360
  }
});

{% endhighlight %}


## cellsByRow

A **vertical** 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 %}

## fitColumns

Item elements are arranged into columns. Columns progress **horizontally** from left to right. Items within those columns are arranged top-to-bottom. The horizontal equivalent of fitRows. 

## fitRows

Item elements are arranged into rows. Rows progress **vertically** 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 **vertical** 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 %}


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

## straightAcross

Item elements are arranged **horizontally** left to right. Useful for simple lists.

## straightDown

Item elements are arranged **vertically** top to bottom. Useful for simple lists.

## Modified layout modes

[Isotope's methods can be extended and overwritten](extending-isotope.html) to shim-in additional functionality. See these modified layout modes:

+ [**Centered masonry**](../custom-layout-modes/centered-masonry.html)
+ [**Masonry corner stamp**](../custom-layout-modes/masonry-corner-stamp.html)
+ [**Masonry gutters**](../custom-layout-modes/masonry-gutters.html)

To use these mods, copy the revised methods found in the demos' page source. They look like:

{% highlight javascript %}

$.Isotope.prototype._masonryReset = function() {
  // modified code..
};

{% endhighlight %}