See this style applied to a real page — identical content, different stylesheet.
Open live preview →About This Style
Bento Grid borrows its name from the Japanese lunchbox: compartments of different sizes packed into one rectangle with no wasted space. Applied to interfaces, it gives a page a single continuous surface divided into tiles of unequal weight, so a product can show six or eight capabilities at once without a wall of identical cards.
The discipline is in the grid, not the decoration. Every tile snaps to the same track, gaps stay constant, and each tile holds exactly one idea with one visual anchor. When a tile needs more space it spans two columns or two rows — it never shrinks its content or breaks the rhythm.
Main Features:
- Shared track, unequal spans: One 12-column grid; tiles occupy 3, 4, 6 or 8 columns. The gaps never change, so the eye reads a single system.
- One idea per tile: A number, a chart, a logo or a short line. Two competing focal points inside one tile is what makes bento layouts feel noisy.
- Constant gap: Usually 12–20px everywhere. Varying the gap breaks the lunchbox metaphor instantly.
- Quiet surfaces: Light background, one border, generous internal padding. The complexity comes from the arrangement, not from gradients.
- Two-row hero tile: The largest tile is the entry point. Everything else is support, which is why the hierarchy reads in under a second.
Example AI Prompt
Design a Bento Grid section for a product page.
Grid:
- A single 12-column grid with a constant gap of 16px. Tiles span 3, 4, 6 or 8 columns and may span two rows.
- Exactly one tile is visually dominant: a two-column-wide or two-row-tall hero tile that carries the main claim.
Tiles:
- Each tile contains one idea, one short label and one visual anchor — a number, a small chart, an icon or a logo row. Never two competing focal points.
- Internal padding 24px minimum. Content aligned to a consistent corner within each tile.
Styling:
- Background: one very light surface. Border: 1px, low contrast. Radius: 14-18px, identical on every tile.
- No gradients, no drop shadows beyond a 1px border. The grid provides the structure; decoration dilutes it.
Constraints:
- Keep the gap identical everywhere, including between rows.
- On viewports under 768px, collapse to a single column and preserve tile order — do not reshuffle by size.
- Tiles must remain readable at 320px width; do not hide content behind hover on touch devices.Theme CSS Snippets
The core variables for the Bento Grid theme. Tiles inherit --card-bg and --card-border-radius, so changing the radius in one place restyles every tile at once.
body.theme-bento-grid {
--page-bg: #f7f7f5;
--page-bg-gradient: none;
--text-color: #31353d;
--heading-color: #14171c;
--link-color: #2f6feb;
--border-color: #e3e4e1;
--card-bg: #ffffff;
--card-shadow: none;
--card-hover-shadow: 0 6px 18px -12px rgba(20, 23, 28, .4);
--header-bg: #14171c;
--header-text-color: #f7f7f5;
--prompt-bg: #f1f2ef;
--prompt-text-color: #3c414a;
--button-bg: #14171c;
--button-text-color: #ffffff;
--button-hover-bg: #31353d;
--card-border-radius: 16px;
--base-font: var(--font-inter);
--heading-font: var(--font-inter);
}Where it fits
Use it when
- A feature section that needs to show six or more capabilities without becoming a card wall.
- Product dashboards or app marketing pages where the screenshot is the second focal point.
- Any page where the reader scans rather than reads — the grid gives them places to land.
Avoid it when
- When all items carry equal weight. Bento is a hierarchy tool; a uniform grid of equal tiles is just a grid.
- On long-form editorial pages — the tile rhythm fights paragraph flow.
- If you cannot design the dominant tile well. An empty hero tile is the most visible failure in this layout.
Resource Download
A working single-page demo in this style — the HTML and one self-contained stylesheet, no build step.
Download bento-grid.zip