Bento grid
/BEN-toh GRID/ · noun · CONTENT pattern · #117
A layout of rounded cards in different sizes fitted together into one tidy rectangle — a big card beside two small ones, a wide one under them — each showing one feature, number or image. Named after the compartments of a Japanese bento lunch box, it is a common way to show a product’s features on a landing page.
Also called: bento box layout, bento layout, bento box design, bento UI.
You might call it
- “the boxy card layout on landing pages”
- “the grid of different size boxes”
- “the Apple-style feature grid”
- “the bento box website layout”
…its name is Bento grid.
Common questions
What is a bento grid in design?
A grid of cards in several sizes packed into one rectangle with even gaps, like the compartments of a bento lunch box. Each card holds one idea — a feature, a stat, a screenshot — and the biggest card shows the most important one. Apple’s keynote slides are often credited with making it popular; Microsoft’s Windows Phone tiles used a similar idea earlier.
Bento grid vs masonry layout: what is the difference?
In a bento grid, cards span whole rows and columns of one grid, so the edges line up and the block ends in a clean rectangle. A masonry layout, like Pinterest’s, stacks cards of any height in columns, so rows do not line up and the bottom edge is ragged. Bento suits a few hand-placed features; masonry suits long feeds of images.
In code
| Web (CSS) | display: grid grid-template-areas grid-column: span 2 |
|---|---|
| Tailwind CSS | grid col-span-2 row-span-2 |
| SwiftUI | Grid GridRow .gridCellColumns(_:) |
| Jetpack Compose | LazyVerticalGrid GridItemSpan |
Prompt for your AI coding tool
Lay out these features as a bento grid: a CSS grid of four columns with even gaps, where the most important feature takes a 2×2 card, two supporting features take 1×1 cards and a wide 2×1 card holds a stat or screenshot. Give every card the same corner radius and padding and one idea each, and collapse to a single column on phones with the cards in reading order.
More UI words to use when vibe coding →
Related patterns
All the parts of a website, named →