Introduction

Masonry is a dynamic grid layout script. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

You might have heard of jQuery Masonry, this is the framework-free version.

Getting started

Markup

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

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

Add the Masonry script.

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

CSS

All sizing of items is handled by your CSS. Items should be floated.

.item {
  width: 220px;
  margin: 10px;
  float: left;
}

Script

Initialize a Masonry instance with new Masonry( element, options ). The Masonry constructor accepts two arguments.

1. The container element
2. An options object

Set columnWidth to set the width of columns in the layout grid. There are a number of other options you can specify.

window.onload = function() {
  var wall = new Masonry( document.getElementById('container'), {
    columnWidth: 240
  });
};

That’s it!

See Demo: Basic multi-column

CSS transitions

You can animate layout rearrangements on CSS3 transitions. In your CSS, add transition styles below. The Masonry plugin will add a class of masonry to the container after the first arrangement so transitions can be applied afterward. Item elements will have a class of masonry-brick added.

/**** Transitions ****/

.masonry,
.masonry .masonry-brick {
  -webkit-transition-duration: 0.7s;
     -moz-transition-duration: 0.7s;
      -ms-transition-duration: 0.7s;
       -o-transition-duration: 0.7s;
          transition-duration: 0.7s;
}

.masonry {
  -webkit-transition-property: width, height;
     -moz-transition-property: width, height;
      -ms-transition-property: width, height;
       -o-transition-property: width, height;
          transition-property: width, height;
}

.masonry .masonry-brick {
  -webkit-transition-property: left, right, top;
     -moz-transition-property: left, right, top;
      -ms-transition-property: left, right, top;
       -o-transition-property: left, right, top;
          transition-property: left, right, top;
}

Code repository

This project lives on GitHub at github.com/desandro/vanilla-masonry. There you can grab the latest code and follow development.

Acknowledgments

My thanks go out to following developers, whose work was integral in making Masonry lightweight and cross-browser compatible.

• Dustin Diaz for add/remove class function in bonzo
• The jQuery team for the getWH helper function within jQuery
• John Hann for debouncing methods
• John Resig for cross-browser addEvent & removeEvent functions
• Mike Sherov for his fix to resolve measuring percent margins in WebKit

Changelog

v1.0: Dec 2011

Original release

License

Vanilla Masonry is licensed under the MIT license. It may be used for personal and commercial applications.