The flip-side of CSS Floats. jQuery plugin that rearranges item elements to a grid.
JavaScript Shell
Pull request Compare This branch is 8 commits ahead of stutrek:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


jQuery Masonry

Masonry is a dynamic grid layout plugin for jQuery. 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.

This package has all the documentation and demos to get you started.

View this project live at

Viewing this project locally

Via download

You can download a zip of all the flat HTML files from

Via Jekyll

The documentation and demo pages are generated using Jekyll. With Jekyll installed, you can clone this repo and run Jekyll from Terminal:

git clone
cd masonry/
jekyll --server --auto

Then view the live site at http://localhost:4000.

Including Masonry as a submodule

The module branch has just jquery.masonry.js and jquery.masonry.min.js, perfect for adding to your repo as a submodule.

git submodule add
cd masonry/
git checkout module
git pull origin module
cd ../
git submodule update --init

Then you can reference masonry/jquery.masonry.min.js within your own project.

To pull in the lastest version of the masonry submodule:

cd masonry/
git pull origin module

Copyright (c) 2012 David DeSandro