jQuery Masonry

Masonry is a 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 then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

This project lives on GitHub at github.com/desandro/masonry, where you can follow progress and download all these demos and documentation, and grab the latest version of the script.

There you can find an issue tracker where you can look through other people's resolved issues or submit a new one for yourself. If you're still having trouble, try looking over the FAQ.

Comparison Example

CSS Floats

1

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris.

2

Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.

3

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit. Aenean ac mauris non ligula.

4

Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.

5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

6

Cadipiscing in, lacinia vel, tellus.

7

Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.

8

Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Suspendisse ac urna. Etiam pellentesque. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl. Suspendisse ac urna. Etiam pellentesque.

9

Ut convallis, sem sit amet interdum consectetuer, odio augue aliquam leo, nec dapibus tortor nibh sed augue. Ut condimentum mi vel tellus. Suspendisse laoreet. Fusce ut est sed dolor gravida convallis. Morbi vitae ante. Vivamus ultrices luctus nunc. Suspendisse et dolor. Pellentesque a diam sit amet mi ullamcorper vehicula. adipiscing in, lacinia vel, tellus.