Github url


by desandro

desandro /masonry

:love_hotel: Cascading grid layout plugin

14.7K Stars 2.1K Forks Last release: about 2 years ago (v4.2.2) 451 Commits 47 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


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 for complete docs and demos.




Link directly to Masonry files on unpkg.

<script src="[email protected]/dist/masonry.pkgd.js"></script><!-- or --><script src="[email protected]/dist/masonry.pkgd.min.js"></script>

Package managers


npm install masonry-layout --save


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.


With jQuery

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

With vanilla JavaScript

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


Add a


attribute to your element. Options can be set in JSON in the value.



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

Made by David DeSandro

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.