A bento grid is a layout of rounded tiles in different sizes on one grid, each tile holding one feature, figure or image. Size carries the hierarchy, usually with one large hero tile and smaller tiles around it; the layout became popular through Apple's product presentations.
Bento Grid
Details
- Full Name
-
Bento Grid — a layout of rounded tiles in different sizes on one grid, each tile holding one piece of content
- Also known as
-
Bento box layout, bento UI
Core Concepts:
-
One grid, tiles of different sizes. Tiles span one or more columns and rows — 2 × 2, 2 × 1, 1 × 1 — so the layout is uneven but still aligned.
-
Size carries the hierarchy. The most important item gets the largest tile; secondary items fill smaller ones around it.
-
One idea per tile. Each compartment holds one feature, number, image or short statement, the way a bento box holds one dish per compartment.
-
Rounded cards with even gaps. Tiles have generous corner radii and the same gap on every side, which makes the uneven sizes read as one system.
-
Rich tile content. Tiles often show a product screenshot, a large figure or an icon rather than only text.
-
Built on CSS Grid. Spanning columns and rows is what CSS Grid does natively; on narrow screens the tiles collapse into one or two columns.
- Key Proponents
-
No single originator. Many attribute it to Apple’s promotional videos and keynote summary slides; some trace it further back to the tile layout of Microsoft’s Metro design in Windows Phone 7 ("Web design trend: bento box", UX Collective Bootcamp). The name comes from the Japanese bento lunch box with its divided compartments.
When to Use:
-
Feature sections on product landing pages, where a handful of features of unequal weight must fit one screen
-
Portfolios, dashboards and "at a glance" summaries
-
As a counter-instruction when generated layouts fall back on a uniform grid of identical cards
Common Misunderstandings:
-
Treating any card grid as a bento grid. A grid of identical cards is just a card grid. The varied tile sizes are what make it bento.
-
Using the bare "bento". In our prior test on 2026-10-29, "What is bento?" resolved to Japanese food on all three tiers. Say "bento grid".
-
Expecting it by default. In the same test, five of six baselines laid six features out as a uniform three-by-two grid. With "Use a bento grid." six of six runs mixed tile sizes, typically a 2 × 2 hero tile with smaller tiles around it.
-
Ignoring the narrow screen. The composition depends on width; on a phone it becomes a stack, and the hierarchy has to survive that.
Criticism:
-
Too much in one screen. David Jaja warns in "Bento Grids in Web Design" (freeCodeCamp, 2024) that "there’s a risk of cramming too much information into a single screen". He also names weak hierarchy when tiles look alike, choice overload and monotony when the grid is overused.
