Isotope v2 beta

Changes from Isotope v1. Report any issues with Isotope v2. Thanks for being brave!

masonryHorizontal

masonryHorizontal is the horizontal version of Masonry. It works by placing elements in optimal position based on available horizontal space.

1

2

3

4

5

6

7

8

9

10

11

12

Options

rowHeight

Type: Number, Element, or Selector String

The height of a row of a vertical grid.

If rowHeight is not set, the outer height of the first element will be used by default.

layoutMode: 'masonryHorizontal',
masonryHorizontal: {
  rowHeight: 50
}

If set to an Element or Selector String, the height of that element will be used. See Element sizing. This is useful for responsive design and media queries.

gutter

Type: Number, Element, or Selector String

The vertical space between item elements.

layoutMode: 'masonryHorizontal',
masonryHorizontal: {
  rowHeight: 50,
  gutter: 10
}

To set horizontal space between elements, use margin CSS.

layoutMode: 'masonryHorizontal',
masonryHorizontal: {
  rowHeight: 50,
  gutter: 10
}
#masonry-horizontal-right-spaced .mini-item {
  margin-right: 10px;
}

If set to an Element or Selector String, the outer height of that element will be used. See Element sizing. This is useful for responsive design and media queries.