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 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.

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

Items jump after transitioning position

This double transition jump bug occurs when CSS transitions are enable for all properties on item elements.

.grid-item {
  transition: all 0.4s;
}

Edit this demo on CodePen

Fix it by setting transition properties to only the properties that will be transitioning.

.grid-item {
  transition: background 0.4s, box-shadow 0.4s;
}

Edit this demo on CodePen

jQuery appended content not working

Isotope's appended method will work with a jQuery object, but not with an HTML string. Create a jQuery object from the HTML string first, then you can use appended

// doesn't work
// content gets appended, but not added as Isotope item
var content = '<div class="grid-item"></div>'
$grid.append( content ).isotope( 'appended', content )

// works
// make into jQuery object
var $content = $('<div class="grid-item"></div>')
$grid.append( $content ).isotope( 'appended', $content )

Error: “cannot call methods on isotope prior to initialization; attempted to call '___'”

This error occurs when your code attempts to use a method before the Isotope instance has been initialized.

// This code will trigger the "cannot call methods" error

$grid.append( $items )
  // isotope method
  .isotope( 'appended', $items );

// init Isotope
$grid.isotope({
  // options...
});

This can happen if you have a race condition — when one piece of logic may occur before another. This could happen with imagesLoaded, Infinite Scroll, or Ajaxing content.

// race condition with imagesLoaded

$grid.imagesLoaded( function() {
  // init Isotope
  $grid.isotope({
    // options...
  });
});

// imagesLoaded will trigger after this
$grid.append( $items )
  .isotope( 'appended', $items );

To resolve this, make sure that the Isotope instance has been initialized before the method is called.

$grid.imagesLoaded( function() {
  // init Isotope
  $grid.isotope({
    // options...
  });
  // isotope has been initalized, okay to call methods
  $grid.append( $items )
    .isotope( 'appended', $items );
});

// another fix, init Isotope first, before imagesLoaded
$grid.isotope({
  // options...
});
// okay to call methods
$grid.append( $items )
  .isotope( 'appended', $items );
// just do layout on imagesLoaded
$grid.imagesLoaded( function() {
  $grid.isotope('layout');
});