FAQ

How do I fix overlapping item elements?

If your layout has images, you probably need to use imagesLoaded.

Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.

What is Isotope’s browser support?

Isotope works in IE8+ and modern browsers, including mobile browsers on iOS and Android.

What is the difference between Isotope, Masonry, and Packery?

Isotope, Masonry, and Packery are all similar in that they are layout libraries. Many of their options and methods are the same.

Masonry does cascading grid “masonry” layouts. Packery does bin-packing layouts, which allow it to be used for draggable interactions.

Isotope does sorting and filtering. Isotope uses masonry and packery layouts, as well as other layouts.

Masonry is licensed MIT and is freely available for use and distribution. Isotope and Packery have a proprietary license, where you can purchase a license for commercial projects, or use it freely for open-source projects.

The first item breaks the grid!

You most likely need to set the columnWidth option for masonry layout mode. Without columnWidth set, the masonry layout mode will use the width of the first item for the size of its columns.

$('#container').isotope({
  masonry: {
    columnWidth: 200
  }
});

How can I access filtered items in current order?

Use the filteredItems property. filteredItems is an array of Isotope Items.

// init isotope, filter & sort
var $container = $('#container').isotope({
  filter: '.selector',
  sortBy: 'order'
});
// get Isotope instance, if using jQuery
var iso = $container.data('isotope');
// count how many
console.log( 'filtered ' + iso.filteredItems.length + ' items' );
// first element
console.log( iso.filteredItems[0].element );