# 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

### Example

    $('#container').isotope({ layoutMode : 'fitRows' });

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.

    #container {
      /* either of these will work for horizontal Isotope layouts */
      height: 80%;
      height: 480px;
    }

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

`columnWidth`
  Integer

`rowHeight`
  Integer

### Example

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

## cellsByRow

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

### Options

`columnWidth`
  Integer

`rowHeight`
  Integer

### Example

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

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

`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

    $('#container').isotope({
      masonry: {
        columnWidth: 240
      }
    });

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

`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

    $('#container').isotope({
      masonryHorizontal: {
        rowHeight: 360
      }
    });

## 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 to shim-in additional functionality. See these modified layout modes:

- Centered masonry
- Masonry corner stamp
- Masonry gutters

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

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