Bento Grid
also known asbento box layout · bento ui · modular tile grid
A modular grid of differently-sized rectangular cards arranged like a Japanese bento box.
A bento grid is a layout pattern where rectangular tiles of varying sizes pack together into a single rhythmic composition. Unlike a uniform CSS grid, bento layouts mix wide hero tiles with narrow accent tiles, often with a feature card spanning multiple rows.
The pattern became dominant in 2022–2024 product marketing — Apple's Vision Pro, M-series chip, and iOS feature pages all use it — because it lets a landing page show 6–9 features at once without feeling like a list. Each tile becomes its own micro-poster.
In AI-generated UIs, bento grids are popular because they give the model a clear container language: 'one big tile, two medium, three small' is easier to prompt than freeform composition.
Named after the Japanese boxed lunch (弁当), where compartments of different sizes hold different foods. Popularized in Western UI design around 2022 by Apple's product marketing pages.
- Marketing pages showing 4–9 features at once
- Dashboards mixing KPIs of different importance
- Product feature overviews where one item is the hero
- Long-form editorial content — use a column layout
- Lists where every item has equal weight — use a uniform grid
- Dense data tables
- +Make exactly one tile the visual hero (2× or 3× size)
- +Keep gutters consistent (16–24px is the sweet spot)
- +Vary tile content type — mix copy, image, chart, quote
- −Don't make all tiles the same size — that's just a grid
- −Don't pack more than 9 tiles above the fold
- −Don't use rounded corners larger than 24px — it weakens the box metaphor
Build a bento grid with 6 tiles: 1 large hero tile spanning 2 columns and 2 rows, 2 medium tiles, and 3 small tiles. 24px gutters, subtle 1px hairline borders, generous internal padding.
Paste into Claude Code, Cursor, or Lovable to apply bento grid to your project.
Textbook examples in the directory
Developer infrastructure made invisible. Geist with -2.4px tracking, shadow-as-border philosophy, multi-layer shadow stacks, ligatures everywhere.
An enterprise admin tool that respects density. Cool bone-grey surfaces, Inter for prose and IBM Plex Mono with tabular numerals for every figure, a single steel-blue accent reserved for the active module pane border. Built for B2B internal tools, ops dashboards, and admin consoles where information density is the feature, not the bug.
People also ask
What's the difference between a bento grid and a regular CSS grid?
A regular CSS grid has uniform columns and rows. A bento grid deliberately varies tile sizes to create hierarchy — one large hero tile, several medium, several small — so the eye knows where to land first.
How many tiles should a bento grid have?
Six to nine is the sweet spot. Below 4 it feels sparse; above 9 it stops reading as a composition and starts feeling like a list.
Is bento grid the same as masonry layout?
No. Masonry has uniform column widths but variable row heights driven by content. Bento has deliberately authored tile sizes — both width and height are design decisions, not content-driven.