Bento Grid
Asymmetric card grid inspired by Japanese bento boxes. Popular on Apple landing pages and modern SaaS sites.
Also called: bento box layout, mosaic grid
Hero card
Spans 2 columns
Stats
99.9%
Users
10k+
Tall card
Spans 2 rows
Wide feature
Product highlight
Fast
<50ms
How it works
CSS Grid with mixed grid-column: span N and grid-row: span N. Cards vary in size for visual hierarchy.