Isotope

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

masonry

masonry is the default layout mode. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. masonry uses the same code from the Masonry library.

1
2
3
4
5
6
7
8
9
10
11
12

Edit this demo on CodePen

Options

columnWidth

Aligns items to a horizontal grid.

We recommend setting columnWidth. If columnWidth is not set, Isotope will use the outer width of the first item.

masonry: {
  columnWidth: 50
}

Edit this demo on CodePen

Use element sizing for responsive layouts with percentage widths. Set columnWidth to an Element or Selector String to use the outer width of the element.

<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }

$('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use outer width of grid-sizer for columnWidth
    columnWidth: '.grid-sizer'
  }
})

Edit this demo on CodePen

gutter

The horizontal space between item elements.

masonry: {
  columnWidth: 50,
  gutter: 10
}

Edit this demo on CodePen

To set vertical space between elements, use margin CSS.

masonry: {
  columnWidth: 50,
  gutter: 10
}

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

Edit this demo on CodePen

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

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="gutter-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

.grid-sizer,
.grid-item { width: 22%; }

.gutter-sizer { width: 4%; }

.grid-item--width2 { width: 48%; }

masonry: {
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer'
},
itemSelector: '.grid-item',
percentPosition: true

Edit this demo on CodePen

horizontalOrder

Lays out items to (mostly) maintain horizontal left-to-right order.

masonry: {
  columnWidth: 100,
  horizontalOrder: true
}

Edit this demo on CodePen

Look how items in the second and third rows are ordered.

// default, items have no horizontal order
masonry: {
  columnWidth: 100,
  // horizontalOrder: false
}

fitWidth

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.

fitWidth 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,
  fitWidth: true
}

/* center container with CSS */
.grid {
  margin: 0 auto;
}

Edit this demo on CodePen