# Masonry

> Cards of varying height packed tightly into columns like stones in a wall — eliminating wasted row gaps when card heights differ.

- Category: Layout-driven
- Era: 2009–present
- Origin: Pinterest (launched 2010); CSS multi-column layout
- Lesson: https://design.dawit.dev/styles/masonry
- Try it: https://design.dawit.dev/styles/masonry?style=masonry

## Where it came from

Pinterest popularised masonry layout when it launched around 2010, using JavaScript to position cards of varying heights with no vertical gap between rows. The CSS `columns` property can approximate it without JS, though column-first reading order is a trade-off. Native CSS masonry has since been standardised as `display: grid-lanes` and began shipping in Safari in 2026, with other engines following. The layout suits any collection where card heights vary — images, recipes, products, bookmarks.

## How to spot it

- Multiple columns with no vertical gap between cards in the same column
- Cards of varying height pack together without row alignment
- Column-based flow (not row-based) — content fills columns left to right
- Continuous vertical scroll with no hard page breaks

## Strengths

- Maximum content density for varied-height cards
- No white space wasted by the tallest card in a row
- Natural, editorial feel for visual collections

## Weaknesses

- Column-first reading order can confuse users expecting left-to-right rows
- JavaScript often needed for even packing; CSS columns flow left-first
- Infinite scroll and masonry together make navigation and bookmarking hard

## In the wild

- Pinterest boards and home feed
- Unsplash photo discovery grid
- Designspiration and similar visual curation sites

## Use it when

Visual collections — images, recipes, products, notes — where cards vary in height and fitting them tightly matters.

## Related styles
[Bento Grid](https://design.dawit.dev/styles/bento-grid.md), [Card UI](https://design.dawit.dev/styles/card-ui.md), [Editorial](https://design.dawit.dev/styles/editorial.md)