Isotope

  1. Filtering
  2. Sorting
  3. Layout
  4. Layout modes
  5. Options
  6. Methods
  7. Events
  8. Extras
  9. License
  10. FAQ

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

Edit this demo on CodePen

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
}

Edit this demo on CodePen

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
}

Edit this demo on CodePen

To set horizontal space between elements, use margin CSS.

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

.grid-item {
  margin-right: 10px;
}

Edit this demo on CodePen

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.