Masonry Grid
瀑布流
Dynamic multi-column layout where variable-height items stack tightly without vertical gaps.
Live Demo
Actually clickableWhat you just saw:Pinterest or Red/Xiaohongshu feeds: a tall vertical photo on the left, a square card on the right followed immediately by a medium recipe snapshot, with columns staggering naturally without dead space.
What it actually is
Masonry solves the problem of awkward whitespace left by mismatched media aspect ratios in rigid grids. Mimicking stonemasons fitting uneven bricks, each arriving card slots immediately beneath the shortest column. This eliminates gaping holes, producing a lush, uninterrupted waterfall of rich imagery and social cards.
Anatomy · What it's made of
Columns自适应列数
Adaptive column tracks scaling from 2 to 4 based on viewport
Variable-Height Card不定高卡片
Self-sizing cards expanding to natural image aspect ratios
Gutter Gap列间与行间距
Consistent horizontal and vertical gutters between brick tiles
Break Avoid防断裂规则
CSS break-inside: avoid preventing cards from splitting across columns
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Visual inspiration feeds, photography galleries, and Pinterest-style boards | Yes |
| User-generated content (UGC) where image dimensions cannot be normalized | Yes |
| E-commerce buyer reviews and social commerce showcases | Yes |
| Strict horizontal comparison tables where row alignment is mandatory | No |
| Sequential procedural step-by-step documentation workflows | No |
Using staggered heights for data tables where users must scan horizontally across matching rows.
Omitting break-inside-avoid, allowing browsers to awkwardly bisect cards across columns.
Similar Patterns
Don't mix these upMasonry GridCurrent
瀑布流
Dynamic multi-column layout where variable-height items stack tightly without vertical gaps.
Bento Grid
便当盒网格
Asymmetric modular grid inspired by bento lunchboxes, arranging varied feature tiles cleanly.
In one line:Dynamic multi-column layout where variable-height items stack tightly without vertical gaps.
Bento Grid
便当盒网格
Asymmetric modular grid inspired by bento lunchboxes, arranging varied feature tiles cleanly.
Container
版心
Constrains page width and centers content to prevent overly long lines on wide displays.
Full-Bleed Section
全宽通栏带
Breaks container constraints to stretch edge-to-edge, injecting contrast and spatial pacing.
Sidebar App Shell
应用侧栏架构
Classic application shell pairing a persistent navigation rail with an independently scrolling canvas.
How to tell AI
Three levels of promptAdd the component name and specifics
Implement a responsive masonry feed using CSS columns (2 columns on mobile, 3 to 4 on desktop): cards with 12px rounded corners, 16px bottom margins, break-inside-avoid, holding images, titles, and engagement counts.
Don't just say this to AI
Bad → BetterDon't say this to AI
List cards with uneven heights.
Say this instead
Implement an adaptive masonry layout: columns-2 sm:columns-3 lg:columns-4 gap-4, apply break-inside-avoid mb-4 to card wrappers, maintain natural aspect ratios, and prevent layout thrashing.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.