Masonry

Cascading grid layout library, _(*1)

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., _(*2)

See masonry.desandro.com for complete docs and demos., _(*3)

Install

Download

masonry.pkgd.js un-minified, or
masonry.pkgd.min.js minified

CDN

Link directly to Masonry files on unpkg., _(*4)

``` html , _(*5)


### Package managers

[npm](https://www.npmjs.com/package/masonry-layout): `npm install masonry-layout --save`

Bower: `bower install masonry-layout --save`

## Support Masonry development

Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by [purchasing a license for one of Metafizzy's commercial libraries](https://metafizzy.co).

## Initialize

With jQuery

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

With vanilla JavaScript, _(*6)

``` js // vanilla JS // init with element var grid = document.querySelector('.grid'); var msnry = new Masonry( grid, { // options... itemSelector: '.grid-item', columnWidth: 200 });, _(*7)

// init with selector var msnry = new Masonry( '.grid', { // options... });, _(*8)


With HTML

Add a `data-masonry` attribute to your element. Options can be set in JSON in the value.

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