Cascading grid layout library

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.

For complete docs and demos, see or if you’re lazy.


A packaged source file includes everything you need to use Masonry.

  • masonry.pkgd.min.js
  • masonry.pkgd.js

Or, if you’re cool with the command line…

Install with Bower: bower install masonry

Install with npm npm install masonry-layout


In JavaScript

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options...
  itemSelector: '.item',
  columnWidth: 200


Add a class of js-masonry to your element. Options can be set in JSON in data-masonry-options.



Masonry is released under the MIT license. Have at it.

Copyright :copyright: 2015 David DeSandro