Options

All options are optional, but itemSelector is recommended. Layout modes have their own separate options.

// with jQuery
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  // layout mode options
  masonry: {
    columnWidth: 200
  }
});

// with vanilla JS
var iso = new Isotope( '.grid', {
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',
    category: '[data-category]'
  },
  masonry: {
    columnWidth: 200
  }
});

<!-- in HTML -->
<div class="grid" data-isotope='{ "itemSelector": ".grid-item", "getSortData": { "name": ".name", "category": "[data-category]" }, "masonry": { "columnWidth": 200 } }'>

Recommended

itemSelector

Specifies which child elements will be used as item elements in the layout.

We recommend always setting itemSelector. itemSelector is useful to exclude sizing elements or other elements that are not part of the layout.

itemSelector: '.grid-item'

<div class="grid">
  <!-- do not use banner in Isotope layout -->
  <div class="static-banner">Static banner</div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

Layout

layoutMode

Sets the layout mode used to position items. Default is layoutMode: 'masonry' See Layout modes.

percentPosition

Sets item positions in percent values, rather than pixel values. percentPosition: true works well with percent-width items, as items will not transition their position on resize.

$('.grid').isotope({
  percentPosition: true,
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: '.grid-sizer'
  }
})

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

Element sizing

Sizing options like masonry: columnWidth, masonry: gutter, and packery: columnWidth can be set with an element. The size of the element is then used as the value of the option.

<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <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 */
.grid-item--width2 { width: 40%; }

$('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // set to the element
    columnWidth: '.grid-sizer'
  }
})

The option can be set to a Selector String or an Element.

// set to a selector string
// first matching element within container element will be used
masonry: {
  columnWidth: '.grid-sizer'
}

// set to an element
masonry: {
  columnWidth: $grid.find('.grid-sizer')[0]
}

Element sizing options allow you to control the sizing of the Isotope layout within your CSS. This is useful for responsive layouts and media queries.

/* 3 columns by default */
.grid-sizer { width: 33.333%; }

@media screen and (min-width: 768px) {
  /* 5 columns for larger screens */
  .grid-sizer { width: 20%; }
}

stamp

Specifies which elements are stamped within the layout. Isotope will layout items around stamped elements.

The masonry, packery, and masonryHorizontal layout modes support stamping.

The stamp option stamps elements only when the Isotope instance is first initialized. You can stamp additional elements afterwards with the stamp method.

<div class="grid">
  <div class="stamp stamp1"></div>
  <div class="stamp stamp2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ....
</div>

// specify itemSelector so stamps do get laid out
itemSelector: '.grid-item',
// stamp elements
stamp: '.stamp'

/* position stamp elements with CSS */
.grid {
  position: relative;
}
.stamp {
  position: absolute;
  background: orange;
  border: 4px dotted black;
}
.stamp1 {
  left: 30%;
  top: 10px;
  width: 20%;
  height: 100px;
}
.stamp2 {
  right: 10%;
  top: 20px;
  width: 70%;
  height: 30px;
}

stamp can be set to a Selector String, Element, or an Array-like object of Elements.

// selector string
stamp: '.stamp'

// single element
stamp: $grid.find('.stamp')[0]

// multiple elements
stamp: $grid.find('.stamp')

originLeft

Controls the horizontal flow of the layout. By default, item elements start positioning at the left, with originLeft: true. Set originLeft: false for right-to-left layouts.

originLeft was previously isOriginLeft in Isotope v2. isOriginLeft will still work in Isotope v3.

originLeft: false

originTop

Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to false for bottom-up layouts. It’s like Tetris!

originTop was previously isOriginTop in Isotope v2. isOriginTop will still work in Isotope v3.

originTop: false

Filtering

filter

Shows items that match the filter and hides items that do not match. See Filtering.

If set to a string, that value is used as a selector.

$grid.isotope({ filter: '.selector' });

If filter is set to a function, that function checks each item and returns true or false if the item should be shown or hidden.

$grid.isotope({
  // filter element with numbers greater than 50
  filter: function() {
    // _this_ is the item element. Get text of element's .number
    var number = $(this).find('.number').text();
    // return true to show, false to hide
    return parseInt( number, 10 ) > 50;
  }
});

Sorting

getSortData

Isotope reads data from HTML with the getSortData option. See Sorting: getSortData.

getSortData is set with an object. The object’s keys are keywords used to sort by. Object values are either a shortcut string or function to retrieve the data.

var $grid = $('.grid').isotope({
  getSortData: {
    name: '.name', // text from querySelector
    category: '[data-category]', // value of attribute
    weight: function( itemElem ) { // function
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[\(\)]/g, '') );
    }
  }
});

sortBy

Sorts items according to which property of getSortData. See Sorting: sortBy. The value of sortBy needs to match a key name in getSortData.

$grid.isotope({
  getSortData: {
    number: '.number parseInt'
  },
  sortBy : 'number'
});

Two additional sortBy options are built in.

$grid.isotope({ sortBy : 'original-order' });
// original order of the item elements

$grid.isotope({ sortBy : 'random' });
// random order

To sort by multiple properties, you can set sortBy to an array of key names.

// sort by color, then number
sortBy: [ 'color', 'number' ]

sortAscending

Sorts items ascendingly if sortAscending: true “A, B, C…”, “1, 2, 3…”, or descendingly if sortAscending: false, “Z, Y, X…”, “9, 8, 7…”.

// sort by number, highest number first
$grid.isotope({
  sortBy: 'number',
  sortAscending: false
});

You can set ascending order for each sortBy value by setting sortAscending to an object.

sortAscending: {
  name: true, // name ascendingly
  weight: false, // weight descendingly
  category: true, // category ascendingly
  number: false // number descendingly
}

Transitions

stagger

Staggers item transitions, so items transition incrementally after one another. Set as a CSS time format, '0.03s', or as a number in milliseconds, 30.

stagger: 30
// stagger item transitions 30ms after one another

transitionDuration

Duration of the transition when items change position or appearance, set in a CSS time format, or as a number in milliseconds. Default: transitionDuration: '0.4s'

// fast transitions
transitionDuration: '0.2s'

// slow transitions
transitionDuration: '0.8s'

// no transitions
transitionDuration: 0

// 0.4s in milliseconds
transitionDuration: 400

hiddenStyle & visibleStyle

The styles applied to hide and reveal items when filtering.

/* default
hiddenStyle: {
  opacity: 0,
  transform: 'scale(0.001)'
},
visibleStyle: {
  opacity: 1,
  transform: 'scale(1)'
}
*/

$grid.isotope({
  // disable scale transform transition when hiding
  hiddenStyle: {
    opacity: 0
  },
  visibleStyle: {
    opacity: 1
  }
})

Setup

containerStyle

CSS styles that are applied to the container element. Def

// default
// containerStyle: { position: 'relative' }

// disable any styles being set on container
// useful if using absolute position on container
containerStyle: null

resize

Adjusts sizes and positions when window is resized. Enabled by default resize: true.

resize was previously isResizeBound in Isotope v2. isResizeBound will still work in Isotope v3.

resize: false

/* grid has fixed width */
.grid {
  width: 304px;
}

initLayout

Enables layout on initialization. Enabled by default initLayout: true.

Set initLayout: false to disable layout on initialization, so you can use methods or add events before the initial layout.

initLayout was previously isInitLayout in Isotope v2. isInitLayout will still work in Isotope v3.

var $grid = $('.grid').isotope({
  // disable initial layout
  initLayout: false
});
// bind event
$grid.isotope( 'on', 'arrangeComplete', function() {
  console.log('arrange is complete');
});
// manually trigger initial layout
$grid.isotope();

Edit this demo on CodePen