Scroll any SaaS landing page shipped in the last year and you'll hit one: a grid of cards in different sizes, one big feature anchoring the corner, smaller ones filling in around it, each with its own little visual. The bento grid went from an Apple keynote flourish to the default feature section in about eighteen months. It's everywhere because it solves a real problem - and it's easy to get wrong. Here's why it took over, how to build one, and the rules that separate a bento grid from a cluttered mess.
What a bento grid actually is
The name comes from the Japanese bento box - a single tray divided into compartments of different sizes, each holding something different, the whole thing composed to feel balanced. In UI terms it's an asymmetric grid: cards that span different numbers of rows and columns, so a primary item gets a large cell and supporting items get smaller ones. Apple popularized it on hardware and OS feature pages, and SaaS marketing adopted it wholesale because it fixed the thing everyone hated about feature sections.
Why it beat the 3-column grid
The old feature section was three identical columns of icon + title + paragraph. Everything the same size means everything reads as equally important, which means nothing stands out, and the eye glazes over. A bento grid encodes hierarchy into the layout itself - the biggest cell is your headline feature, and the reader knows that instantly, before reading a word.
- Visual hierarchy - cell size signals importance, so your best feature leads without a label saying so
- Scannable - varied shapes give the eye anchors instead of a wall of equal boxes
- Room for visuals - a large cell can hold a real product shot or animation, not just an icon
- Density without clutter - you can show more features in less vertical space
- It just looks modern - the asymmetry reads as designed, not defaulted
Building one with CSS grid
You don't need a library. CSS grid with column and row spans does the whole thing. Define a grid, then let specific cells span extra tracks - the featured cell takes two columns, the rest fall into place.
.bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 1rem;
}
/* the hero feature - twice as wide and tall */
.bento > .featured {
grid-column: span 2;
grid-row: span 2;
}
/* a wide-but-short supporting cell */
.bento > .wide {
grid-column: span 2;
}
@media (max-width: 640px) {
.bento { grid-template-columns: 1fr; } /* stack on mobile */
.bento > * { grid-column: auto; grid-row: auto; }
}
That's the entire mechanism. The design work is deciding which cells get the spans and what goes inside each one - the CSS is trivial once the composition is right.
The rules that keep it from looking messy
A bento grid fails when it becomes a random assortment of boxes. What makes it feel composed rather than chaotic is restraint and rhythm.
- One clear hero cell - exactly one item should dominate. Two large cells fight each other.
- Limit the size variations - two or three cell sizes, not six. Too many breaks the rhythm.
- Each cell communicates in under five seconds - title, one line, one visual. If it needs a paragraph, it's a doc, not a bento cell.
- Keep the gaps and radii consistent across every cell so the grid reads as one object.
- Collapse cleanly to a single column on mobile - the spans should reset, not overflow.
The bento grid works because it does the reader's prioritizing for them: the layout itself says "look here first." A three-column grid makes every feature shout at the same volume; a bento grid gives one feature the mic.
See AI SaaS Landing - ships a bento feature grid with custom visuals
Top comments (0)