Bento Grid
An asymmetric grid of differently-sized cards — each spotlighting one feature, stat, or concept — inspired by Japanese bento boxes.
Plain English
A bento grid creates visual hierarchy through size contrast. In a uniform card grid, every card competes equally for attention. In a bento grid, one large hero cell dominates, several medium cells support it, and small stat cells fill the gaps. The eye moves naturally through the layout — big to medium to small — reading the hierarchy the designer intended. It is popular in Apple marketing pages, SaaS feature showcases, and portfolio layouts because each cell has one clear message and the overall composition feels designed, not just listed.
Technical
CSS Grid: display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px. Span cells: grid-column: span 2 or grid-row: span 2. Responsive collapse: @media (max-width: 640px) { all cells use grid-column: span 3 (full width) }. Each cell: consistent padding (24–32px), single content focus, clear background color. Common pattern: one 2×1 hero cell, two 1×1 supporting cells, one 1×2 tall cell, and remaining 1×1 cells.
Live Demo
Bento grid layout
Main stat
120
Design Terms
Recipes
10
Design systems
Demos
100+
Live interactive
Categories
5
Learning
∞
Always growing
Different cell sizes create natural visual hierarchy — let one hero cell tell the main story.
Usage
✓ Good usage
An Apple-style feature page with a large "Main Feature" cell, two medium cells for secondary features, and three small stat cells — each with one bold number and one line of copy.
✗ Bad usage
A bento grid where all cells contain the same amount of text and the same font size — without size contrast, it is just a regular grid with irregular columns.
Recommended values
- Grid: repeat(3, 1fr) or repeat(4, 1fr)
- Hero cell: grid-column: span 2, grid-row: span 2
- Gap: 12–16px
- Cell padding: 24–32px
- Border radius: 12–20px per cell
- Mobile: all cells span full width
Common mistakes
- Cells with too much content — each cell should communicate one thing; if you need bullet points, rethink the layout.
- No mobile plan — bento grids become unreadable at 375px if not collapsed properly.
- Inconsistent padding across cells — mixed 16px and 32px padding cells look unbalanced.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Convert the features section to a bento grid. Use a 3-column CSS grid. Make the "Core Feature" card span 2 columns. Three supporting cards in 1×1 cells. Two stats (users, rating) in narrow cells. Each cell has one icon, one headline, one sentence. Consistent 24px padding and 16px border radius. Collapses to single column on mobile.