Masonry

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.

See masonry.desandro.com for complete docs and demos.

Install

Download

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

CDN

Link directly to Masonry files on cdnjs.

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.js"></script><!-- or --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

Package managers

Bower: bower install masonry --save

npm: npm install masonry-layout --save

Initialize

With jQuery

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

With vanilla JavaScript

// vanilla JSvargrid=document.querySelector('.grid');varmsnry=newMasonry(grid,{// options...itemSelector: '.grid-item',columnWidth: 200});

With HTML

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

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

License

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

---

Copyright 2015 David DeSandro