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

For complete docs and demos, see [masonry.desandro.com](http://masonry.desandro.com) or [masonryjs.com](http://masonryjs.com) if you're lazy,

## Install

A packaged source file includes everything you need to use Masonry.

+ [masonry.pkgd.min.js](dist/masonry.pkgd.min.js)
+ [masonry.pkgd.js](dist/masonry.pkgd.js)

Or, if you're cool with the command line...

Install with [Bower](http://bower.io): `bower install masonry`

[Install with npm](https://www.npmjs.org/package/masonry-layout) `npm install masonry-layout`

## Initialize

### In JavaScript

``` js
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options...
  itemSelector: '.item',
  columnWidth: 200
});
```

### In HTML

Add a class of `js-masonry` to your element. Options can be set in JSON in `data-masonry-options`.

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

## License

Masonry is released under the [MIT license](http://desandro.mit-license.org). Have at it.

* * *

Copyright :copyright: 2014 David DeSandro