Layout-driven · 2009–present
Masonry
Cards of varying height packed tightly into columns like stones in a wall — eliminating wasted row gaps when card heights differ.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 16 tokens
- --bg
oklch(94% 0.008 60) - --fg
oklch(15% 0.008 50) - --muted
oklch(52% 0.01 55) - --surface
oklch(100% 0 0) - --surface-2
oklch(96% 0.006 60) - --border
oklch(87% 0.01 65) - --accent
oklch(52% 0.24 27) - --accent-fg
oklch(99% 0 0) - --focus
oklch(52% 0.24 27)
| Token | Value |
|---|---|
| --font-body | 'DM Sans', system-ui, sans-serif |
| --font-display | 'DM Sans', system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 16px |
| --radius-sm | 10px |
| --shadow | 0 4px 16px oklch(15% 0.008 50 / 0.10) |
| --shadow-lg | 0 12px 40px oklch(15% 0.008 50 / 0.18) |
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root {
--bg: oklch(94% 0.008 60);
--fg: oklch(15% 0.008 50);
--muted: oklch(52% 0.01 55);
--surface: oklch(100% 0 0);
--surface-2: oklch(96% 0.006 60);
--border: oklch(87% 0.01 65);
--accent: oklch(52% 0.24 27);
--accent-fg: oklch(99% 0 0);
--focus: oklch(52% 0.24 27);
--font-body: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Sans', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 4px 16px oklch(15% 0.008 50 / 0.10);
--shadow-lg: 0 12px 40px oklch(15% 0.008 50 / 0.18);
}Where it came from
Origin: Pinterest (launched 2010); CSS multi-column layout
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
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Maximum content density for varied-height cards | Column-first reading order can confuse users expecting left-to-right rows |
| No white space wasted by the tallest card in a row | JavaScript often needed for even packing; CSS columns flow left-first |
| Natural, editorial feel for visual collections | 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.