masonry layout mode

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.

Edit this example on CodePen

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
}

.masonry-gutter .mini-item.w2 {
  width: 110px;
}

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;
}
#masonry-bottom-spaced .mini-item.h2 {
  height: 110px;
}

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 class="flex-4-col-gutter">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="mini-item"></div>
  <div class="mini-item"></div>
  ...
</div>

.flex-4-col-gutter .grid-sizer,
.flex-4-col-gutter .mini-item { width: 22%; }
.flex-4-col-gutter .mini-item.w2 { width: 48%; }
.flex-4-col-gutter .gutter-sizer { width: 4%; }

masonry: {
  columnWidth: '.grid-sizer',
  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.

isFitWidth does not work with element sizing and 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;
}

Edit this example on CodePen