Masonry is a JavaScript grid layout library. It 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.

Install

Download

CDN

Link directly to Masonry files on unpkg.

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

Package managers

Install with Bower: bower install masonry --save

Install with npm: npm install masonry-layout

Getting started

HTML

Include the Masonry .js file in your site.

< script src = "/path/to/masonry.pkgd.min.js" > </ script >

Masonry works on a container grid element with a group of child items.

< div class = "grid" > < div class = "grid-item" > ... </ div > < div class = "grid-item grid-item--width2" > ... </ div > < div class = "grid-item" > ... </ div > ... </ div >

CSS

All sizing of items is handled by your CSS.

.grid-item { width : 200px ; } .grid-item--width2 { width : 400px ; }

Initialize with jQuery

You can use Masonry as a jQuery plugin: $('selector').masonry() .

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

Initialize with Vanilla JavaScript

You can use Masonry with vanilla JS: new Masonry( elem, options ) . The Masonry() constructor accepts two arguments: the container element and an options object.

var elem = document .querySelector( '.grid' ); var msnry = new Masonry ( elem, { itemSelector: '.grid-item' , columnWidth : 200 }); var msnry = new Masonry ( '.grid' , { });

Initialize in HTML

You can initialize Masonry in HTML, without writing any JavaScript. Add data-masonry attribute to the container element. Options can be set in its value.

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

Edit this demo on CodePen

Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector": . Note the value of data-masonry is set with single quotes ' , but JSON entities use double-quotes " .

HTML initialization was previously done with a class of js-masonry and setting options in data-masonry-options in Masonry v3. Masonry v4 is backwards compatible with this code.

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

Next

Learn more about how to use Masonry:

MIT License

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