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 Masonry’s browser support?

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

What is the difference between Isotope and Masonry?

Masonry, Isotope, 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 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. Without columnWidth set, Masonry will use the width of the first item for the size of its columns.

var msnry = new Masonry( elem, {
  columnWidth: 200
});
// or with jQuery
$('#container').masonry({
  columnWidth: 200
});

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

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

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

$container.append( $items )
  // masonry method
  .masonry( 'appended', $items );

// init Masonry
$container.masonry({
  // 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

$container.imagesLoaded( function() {
  // init Masonry
  $container.masonry({
    // options...
  });
});

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

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

$container.imagesLoaded( function() {
  // init Masonry
  $container.masonry({
    // options...
  });
  // Masonry has been initialized, okay to call methods
  $container.append( $items )
    .masonry( 'appended', $items );
});
// another fix, init Masonry first, before imagesLoaded
$container.masonry({
  // options...
});
// okay to call methods
$container.append( $items )
  .masonry( 'appended', $items );
// just do layout on imagesLoaded
$container.imagesLoaded( function() {
  $container.masonry('layout');
});

How do I animate the width or height of item elements?

You cannot transition or animate the size of an item element and properly lay out. But there is a trick — you can animate a child element of the item element.

<div class="masonry">
  <!-- items have item-content children element -->
  <div class="item">
    <div class="item-content"></div>
  </div>
  ...
/* item is invisible, but used for layout
item-content is visible, and transitions size */
.animate-item-size-demo .item,
.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
}
.animate-item-size-demo .item-content {
  background: #09D;
  transition: width 0.4s, height 0.4s;
  /* -webkit-transition -moz, etc, too */
}
/* both item and item content change size */
.animate-item-size-demo .item.is-expanded,
.animate-item-size-demo .item.is-expanded .item-content {
  width: 180px;
  height: 120px;
}

Click to item to toggle size

Edit this example or example with jQuery on CodePen

This technique works on items with responsive, percentage widths. Although, it does require a bit more JS. Check out the example on CodePen to see how it’s done.

#animate-item-size-responsive .item {
  width: 20%;
  height: 60px;
}

#animate-item-size-responsive .item-content {
  width:  100%;
  height: 100%;
  background: #09D;
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}
/* item has expanded size */
#animate-item-size-responsive .item.is-expanded {
  width: 60%;
  height: 120px;
}

Click to item to toggle size

Edit this example or the example with jQuery on CodePen