Masonry Cascading Grid Layout

You can install Masonry via CDN, direct download, or package managers.

CDN

Link directly to the files on unpkg:

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Package Managers

• npm: npm install masonry-layout --save
• Bower: bower install masonry-layout --save

Download

Download the files directly from unpkg:

• masonry.pkgd.js (un-minified)
• masonry.pkgd.min.js (minified)

Masonry is a cascading grid layout library that can be used in AMD, CommonJS, or as a browser global. When used as a browser global, it is available via window.Masonry.

To use Masonry, you typically instantiate it by passing a container element and an options object. The library uses Outlayer internally to manage layout logic.

// Browser global usage
var msnry = new Masonry( container, { 
  // options 
});

You can initialize Masonry directly in your HTML by adding a data-masonry attribute to your container element. You can pass configuration options as a JSON object within the attribute value.

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

You can initialize Masonry using vanilla JavaScript in two ways: by passing a DOM element or by passing a CSS selector string.

Initialize with an element

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

Initialize with a selector

var msnry = new Masonry('.grid', {
  // options...
});

If you are using jQuery, you can initialize Masonry as a jQuery plugin:

$('.grid').masonry({
  // options...
  itemSelector: '.grid-item',
  columnWidth: 200
});

Masonry accepts several configuration options to control the layout behavior. Key options include:

• fitWidth: (Boolean) If true, the container will fit the width of the columns used, rather than the full width of the parent element.
• columnWidth: (Number|Element) The width of a single column. If not provided, Masonry will default to the width of the first item's element.
• gutter: (Number) The spacing between columns.
• horizontalOrder: (Boolean) If true, items are placed in a horizontal order rather than looking for the shortest column (top-down).
• originLeft: (Boolean) Used with stamps to determine if the stamp's origin is from the left or right.
• originTop: (Boolean) Used with stamps to determine if the stamp's origin is from the top or bottom.