Masonry vs. Bento Grid
Masonry packs cards of UNKNOWN heights into columns, like Pinterest — row lines never align, and content flows down each column. A bento grid is DESIGNED: hand-placed tiles of mixed sizes snapping to one grid with aligned edges, like a lunch box. Feeds get masonry; marketing pages and dashboards get bento.
How to tell them apart
- Ragged bottom edges and no horizontal alignment → masonry.
- Tiles align on shared grid lines, with deliberate big and small features → bento.
- Content arrives dynamically (user photos, posts) → masonry.
The full entries — names, anatomy, paste-ready prompts
Masonry
1
3
5
2
4
6
Masonry Layout (Pinterest Grid)web
columns
Cards of different heights packed into columns with no row gaps
Revenue
$48.2k
Users
2.4k
Growth
↑ 12%
+9 signups today
Bento Gridweb
display: grid + grid-column: span 2
One grid, mixed tile sizes — a layout packed like a bento box
Still a different pair on your mind? See every commonly confused pair