Repository files navigation

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.

Seemasonry.desandro.com for complete docs and demos.

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

Link directly to Masonry files onunpkg.

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

npm:npm install masonry-layout --save

Bower:bower install masonry-layout --save

Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development bypurchasing a license for one of Metafizzy's commercial libraries.

With jQuery

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

With vanilla JavaScript

// vanilla JS// init with elementvargrid=document.querySelector('.grid');varmsnry=newMasonry(grid,{// options...itemSelector:'.grid-item',columnWidth:200});// init with selectorvarmsnry=newMasonry('.grid',{// options...});

With HTML

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

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

Masonry is released under theMIT license. Have at it.

Made by David DeSandro