Github url

masonry

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:

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

CDN

Link directly to Masonry files on unpkg.

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

Package managers

npm:

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.

Initialize

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... });

With HTML

Add a

data-masonry

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

...

License

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.