Isotope v2 beta

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

masonry

Masonry is the default layout mode.

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Isotope’s masonry layout mode works just like regular Masonry.

1

2

3

4

5

6

7

8

9

10

11

12

Options

columnWidth

Type: Number, Element, or Selector String

The width of a column of a horizontal grid.

If columnWidth is not set, Masonry will use the outer width of the first element.

masonry: {
  columnWidth: 50
}

Edit this example on CodePen

If set to an Element or Selector String, Masonry will use the width of that element. See Element sizing. Setting columnWidth with element sizing is recommended if you are using percentage widths.

<div class="flex-5-col">
  <div class="grid-sizer"></div>
  <div class="mini-item"></div>
  <div class="mini-item"></div>
  ...
</div>
.flex-5-col .grid-sizer,
.flex-5-col .mini-item { width: 20%; }
.flex-5-col .mini-item.w2 { width: 40%; }
masonry: {
  columnWidth: '.grid-sizer'
},
itemSelector: '.mini-item'

Edit this example on CodePen

gutter

Type: Number, Element, or Selector String

The horizontal space between item elements.

masonry: {
  columnWidth: 50,
  gutter: 10
}

Edit this example on CodePen

To set vertical space between elements, use margin CSS.

masonry: {
  columnWidth: 50,
  gutter: 10
}
#masonry-bottom-spaced .mini-item {
  margin-bottom: 10px;
}

Edit this example on CodePen

If set to an Element or Selector String, Masonry will use the width of that element. See Element sizing.

<div id="masonry-flex-gutter">
  <div class="gutter-sizer"></div>
  <div class="mini-item"></div>
  <div class="mini-item"></div>
  ...
</div>
#masonry-flex-gutter .gutter-sizer { width: 3%; }
masonry: {
  columnWidth: 50,
  gutter: '.gutter-sizer'
},
itemSelector: '.mini-item'

Edit this example on CodePen

isFitWidth

Type: Boolean

Default: false

Sets the width of the container to fit the available number of columns, based the size of container's parent element. When enabled, you can center the container with CSS.

This option does not work with element sizing with percentage width. Either columnWidth needs to be set to a fixed size, like columnWidth: 120, or items need to have a fixed size in pixels, like width: 120px. Otherwise, the container and item widths will collapse on one another.

masonry: {
  columnWidth: 100,
  isFitWidth: true
}
/* center container with CSS */
#masonry-fit-width .isotope {
  margin: 0 auto;
}