Manager

Back Back Up Advanced Editor

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

### Bower

If you are cool with the command line, install Masonry as a [Bower](http://bower.io) package:

``` bash
bower install masonry
```

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

* * *