# 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

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.

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

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

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

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

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