masonryHorizontal

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

Install

This layout mode is not included in isotope.pkgd.js and must be installed separately.

Download masonry-horizontal.js on GitHub.

Install with Bower:

bower install isotope-masonry-horizontal

Install with npm:

npm install isotope-masonry-horizontal

Options

rowHeight

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. See masonryHorizontal element sizing example on CodePen.

gutter

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. See masonryHorizontal element sizing with gutter example on CodePen.