Skip to content
🏩 Cascading grid layout library
JavaScript HTML CSS
Latest commit af5f63c Apr 27, 2016 @desandro πŸ›  add stagger option; πŸ‘· build v4.1.0
+ ⬆️ Outlayer v2.1.0 for stagger option
+ πŸ“¦ ^ dependencies
+ πŸ“ README.mdown -> .md
+ πŸ›  Fix vendor CSS properties. Fixes #834
+ 🍹 Fix gulp version task


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 npmcdn.

<script src=""></script>
<!-- or -->
<script src=""></script>

Package managers

Bower: bower install masonry --save

npm: npm install masonry-layout --save


With jQuery

  // 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 data-masonry attribute to your element. Options can be set in JSON in the value.

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


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

Made by David DeSandro

Something went wrong with that request. Please try again.