Help

jQuery Masonry is a fairly popular plugin. Chances are your issue has already been encountered by someone else.

Reporting bugs and issues

Guidelines

Look over open and closed issues before submitting yours.
Add a link to a live site with the bug. If the project is confidential, try re-creating it in jsFiddle.

The issues tracker is for bugs and issues – when Masonry doesn’t work as expected. It is not for implementation issues – when you are having trouble setting up Masonry. I am unable to personally help with implementation issues but don’t give up!

Additional resources

The Metafizzy blog has posts that cover specialized use cases
Sites using Masonry on Delicious
Sites using Masonry on Zootool (has screenshots)
Stack Overflow questions about Masonry
Other resources that are like Masonry but not

Unloaded media and overlapping

The number one issue that pops up is overlapping content. This is most likely due to unloaded images.

imagesLoaded plugin

The easiest solution is to use the imagesLoaded plugin as shown in the intro. This small plugin will trigger a callback after all the images in the specified content have been loaded.

See Demo: Images.

Inline dimensions

Or you can specify the width and height of images inline.

<img src="img-file.jpg" width="280" height="160" />

If you’re using a PHP-based CMS, you can use the getimagesize function.

$(window).load()

Another solution is to initialize Masonry inside $(window).load() instead of $(document).ready(). This will trigger Masonry after all the media on the page has loaded – images, fonts, external scripts and stylesheets, etc. This method is not recommended as it can cause ugly wait times.

$(window).load(function(){
  $('#container').masonry({
    // options...
  });
});

@font-face fonts

Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.

Typekit

Try the script below when using Masonry on a page with Typekit. This will trigger Masonry when the document is ready and again when fonts have loaded. Be sure to remove Typekit’s default script, try{Typekit.load();}catch(e){}.

var $container;

function triggerMasonry() {
  // don't proceed if $container has not selected
  if ( !$container ) {
    return
  }
  $container.masonry({
    // options...
  });
}

$(function(){
  $container = $('#container');
  // trigger masonry on doc ready
  triggerMasonry();
});

// trigger masonry when fonts have loaded
Typekit.load({
  active: triggerMasonry,
  inactive: triggerMasonry
});

First item breaks grid

If you run into an issue where you re-size the first item, and all the rest of the items no longer fit together in the grid, you most likely need to set columnWidth option. Without columnWidth set, Masonry will use the width of the first item for the size of its columns.

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

Filtering

Filtering with Masonry is officially unsupported as of v2.0. Use Isotope instead. Isotope shares a majority Masonry’s features. It also has additional powerful features like filtering and sorting built right in, so you probably won’t be missing any functionality.

Getting data

You can access all the options and properties in a Masonry instance using the .data() method with the namespace 'masonry'.

$('#container').data('masonry');