Layout pattern · updated 3 Sept 2026
Bento grid
A bento grid is a dense, asymmetric grid of rounded cards in mixed sizes, named after the compartmented lunch box, used to present many features or facts at once without a list. Cells span one or two columns and rows, and the whole block reads as a single composed object rather than a row of equal cards.
Think of it as
A newspaper front page. Not everything is the same size, the big story gets the big box, and the composition tells you what matters before you read a word.
Worked example
Our bento grid builder generates the CSS for this: a grid with explicit column and row spans per cell, one gap value, and one radius shared by every cell. Change the radius on one cell and the composition breaks, which is exactly what the decoder's consistency card flags as a mixed-radius tell.
Why it matters
Bento grids are where radius discipline shows. Six or more cards share an edge, so a single off-token radius or gap is visible in a way it never is on a lone card. They are also the layout most likely to collapse badly on a phone if the spans are not rethought at the breakpoint.
How it fails
Mixed radii across cells. Text-heavy cells that overflow at narrow widths because the span was designed for desktop only. Decorative cells with no content that a screen reader still announces.
What to measure open the decoder →
- Count of distinct border-radius values inside the grid
- The gap value and whether it matches the spacing scale
- How the grid re-flows at 390px: spans should drop to a single column, not overflow
- Contrast of text on any tinted cell background
Where you meet it
- Product feature sections
- Portfolio work overviews
- Operating system and hardware launch pages
On this site
The bento grid builder emits the layout; the Grid hub collects sites where the grid is the visible design.
Showcase collections that exhibit it
Build it
Next rung
A bento grid is a card grid that gave up equal sizes. Understand the plain card grid first, then the reasons to break its symmetry.