Masonry Layout

Masonry Layout arranges posts of different sizes into the best fit possible. The most famous example is Pinterest:

According to the author of the original plug-in that made this layout famous, the name comes from stonemasonry:

Elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

Advantages

• Attractive layout displaying maximum items in the minimum amount of space
• Can accommodate images of varying heights so can have portrait items side-by-side with landscape
• Leaves very little unused space
• Adapts fantastically to page resizing – Just subtracts columns as the width gets smaller

Disadvantages

• Works best with a large number of items
• Highlights items with most attractive images rather than important items
• No obvious sequence of reading for the viewer
• Can look cluttered

Examples

• Pinterest.com
• Tumblr Search
• Cutestpaw

Articles

• Understanding Masonry Layout – Sitepoint

This is the first of our new series of articles which will build into a glossary of website terms.