Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Layout elements in a grid, like a mason fitting stones in a wall

This branch is 77 commits behind desandro:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
test
.gitignore
.jshintrc
.tm_properties
CONTRIBUTING.mdown
README.mdown
bower.json
masonry.js

README.mdown

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 or masonryjs.com if you're lazy,

Install

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

Bower

If you are cool with the command line, install Masonry as a Bower package:

bower install masonry

Initialize

In JavaScript

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.

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

License

Masonry is licensed MIT. Have at it.


Copyright (c) 2013 David DeSandro

Something went wrong with that request. Please try again.