zen tools

Masonry Instructions

What is 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.

How to use Masonry?

Masonry is a flexible solution for creating layouts with same and varied width elements.

Masonry Options

Column Width

Width in pixels of 1 column of your grid. If no columnWidth is specified, Masonry uses the width of the first item element.

Masonry Gutter

Width in pixels of the right margin of each item.