Design Atlas
한국어
▦ Layout

Masonry

메이슨리

A multi-column layout that packs cards of varying heights tightly, like bricks — Pinterest is the classic example.

Also known as: Pinterest layoutBrick layout
···
html
<div class="wall" id="wall"></div>
css
.wall{width:min(94%,560px);height:min(90%,340px);columns:3;column-gap:clamp(5px,1.4vmin,10px)}
.brick{break-inside:avoid;margin-bottom:clamp(5px,1.4vmin,10px);border-radius:8px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 1px 6px rgba(0,0,0,.06);transition:height .6s cubic-bezier(.2,.8,.2,1)}
.brick:nth-child(3n+1){background:color-mix(in oklab,var(--accent) 22%,var(--surface))}
.brick:nth-child(3n+2){background:color-mix(in oklab,var(--accent-3) 22%,var(--surface))}
js
const wall = document.getElementById('wall');
const heights = [46, 88, 64, 112, 54, 96, 70, 120, 58];
for (let i = 0; i < heights.length; i++) {
  const d = document.createElement('div');
  d.className = 'brick';
  d.style.height = heights[i] + 'px';
  wall.appendChild(d);
}
const bricks = () => wall.querySelectorAll('.brick');
setInterval(() => {
  const list = bricks();
  const target = list[Math.floor(Math.random() * list.length)];
  target.style.height = (40 + Math.floor(Math.random() * 100)) + 'px';
}, 900);

A regular grid rows everything to equal height, so a tall image leaves dead space below its shorter neighbours. Masonry removes that gap by dropping each new item into whichever column is currently shortest.

CSS alone can fake it with columns: 3 (multi-column layout), but then items fill one column top-to-bottom before moving to the next, so reading order zigzags vertically instead of left-to-right. True Pinterest-style ordering (always fill the shortest column) needs either JS tracking each column's height, or the newer grid-template-rows: masonry (Firefox only, for now).

With only a handful of cards a uniform grid is fine. Masonry earns its keep once heights are genuinely irregular and there are many items — image feeds, pin boards.

When to use

Use when card heights vary a lot and there are many of them. Avoid it for order-sensitive content (step-by-step guides) — fill order and visual order diverge.