Need help with masonry?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

desandro
15.1K Stars 2.1K Forks 451 Commits 36 Opened issues

Description

:love_hotel: Cascading grid layout plugin

Services available

!
?

Need anything else?

Contributors list

No Data

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.


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.