This quarter
Revenue
$48.2k
Users
2.4k
Growth
↑ 12%
+9 signups today
The one big tile is a spanning cell (grid-column: span 2) — mixed tile sizes on one grid make it a bento
Bento Grid
/ display: grid + grid-column: span 2 · grid-template-columns: repeat(4, 1fr) /
also called bento box layout, feature grid, dashboard grid
“Several boxes in a grid — bento” is a bento grid: one CSS grid where tiles span different numbers of cells, so a hero tile sits among small ones like compartments in a Japanese lunchbox. Apple's marketing pages made the style famous. The tell versus a plain card grid is the spanning: at least one tile takes 2×2 or 2×1 cells while everything stays aligned to the same tracks and gap.
Anatomy — every part, named
- 1Spanning tile
grid-column: span 2“The one big box among the small ones” is a spanning tile — a normal grid item told to take two columns and/or two rows.
- 2Gap (gutter)
gap“The even spacing between all the boxes” is the grid's gap — one value, never per-tile margins, which is why a bento looks machine-packed.
Prompt — paste into your agent
Build a bento grid: one CSS grid (display: grid; grid-template-columns: repeat(4, 1fr); one consistent gap) where feature tiles span multiple cells via grid-column: span 2 / grid-row: span 2, every tile shares the same corner radius and an opaque background, and the whole composition reads as a single rounded box of differently sized compartments.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my bento grid (CSS grid with spanning tiles). Rule out: holes in the grid because a span exceeds the remaining columns in its row (consider grid-auto-flow: dense, noting it reorders visually vs DOM); uneven gutters from per-tile margins instead of the grid's single gap; tiles with different corner radii or translucent backgrounds breaking the lunchbox look; the hero tile collapsing on small screens because the span isn't reduced under a media query. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | display: grid + grid-column: span 2 | spanning cells are what make a grid a bento |
| CSS | grid-template-columns: repeat(4, 1fr) | the fixed track skeleton the spans play against |
| CSS | grid-template-areas | name the tiles instead of counting spans |
| Tailwind | col-span-2 row-span-2 |