Bento grid in web design: cards of different sizes in one grid
One grid on three screens, where the bento came from, four cell sizes, one idea per card, where it fits and a bento for a portfolio — with live examples and prompts for images.
In short
A bento grid lays out content as cards of different sizes in one strict grid — like compartments in a Japanese lunch box. The largest card holds the main idea, the smaller ones hold one fact, number, feature or quote each. All cards share one gap, one padding and one corner radius, and their sizes come from a small set: 2 × 2, 2 × 1, 1 × 2 and 1 × 1. The layout became popular through product presentations and feature pages and now appears in portfolios and dashboards. It works when every card carries one idea and the grid is rebuilt for tablets and phones in the order of importance — and turns into Tetris when cards are crammed with several messages and different radii.
One grid, three screens
A feature page of a planner app. Switch the screens: the cards stay the same, only their places in the grid change.
On a desktop the grid is four columns wide, on a tablet two, on a phone one. The main card is first and largest everywhere, then the cards go in the order of importance — not in the order they happened to stand on the wide screen.
Where the bento grid came from
Bento grid feature section for a team planning app, desktop screenshot, cards of different sizes in a strict grid with equal gaps and identical rounded corners, one large dark graphite card with the product promise and an interface preview, an acid-lime card with a big number "3×", a calendar card, a sync card with phone, tablet and laptop outlines, a testimonial card on pale sage, an avatars card, soft sage-grey page background, flat 2D UI design, crisp typography, aspect ratio 16:9The name comes from the Japanese bento box, where every dish has its own compartment. The idea of a grid of tiles of different sizes was used in the live tiles of Windows 8, and in the 2020s it became a common way to sum up product features in presentations and on landing pages — one card, one feature.
The appeal is simple: a bento grid can be read in any order, each card is a small finished story, and the whole page fits in a glance.
Four cell sizes
A small set of sizes keeps the grid calm. The size of a card depends on the weight of its idea, not on how much text it holds.
One idea per card
The same content. On the left, ideas are crammed together and every cell has its own gaps and corners; on the right, it is a system.
three ideas in one cell, cells with different gaps and radii
one idea per cell, one gap, one radius
Where a bento grid fits
A bento grid is good at summing up. It is bad at explaining step by step.
-
Product features
FitsOne card per feature, the main one larger.
-
A personal portfolio
FitsPhoto, bio, projects and contacts on one screen.
-
A dashboard
With careWorks if every widget answers one question.
-
A service landing page
With careAs one block of benefits, not the whole page.
-
An article or instructions
Does not fitThe text needs a sequence, not compartments.
-
Forms and checkout
Does not fitOne column and one path to the end.
A bento grid for a portfolio
Personal portfolio homepage designed as a bento grid, desktop screenshot, tiles of different sizes with equal gaps and identical rounded corners, a large tile with a portrait photo and the designer’s name, a tile with a short bio, a tile with a map pin, three tiles with project thumbnails, a tile with social links, a small acid-lime tile saying "Available for work", palette of off-white, sage green, graphite and acid lime, flat 2D UI design, aspect ratio 16:9For a personal site the bento grid replaces several screens: who I am, where I am, what I did and how to reach me — all at once. The rule is the same: one tile, one thing, and the largest tile goes to what you want to be remembered by.
A bento grid in code: 2 examples
A hand-placed grid with named areas for each screen, and an automatic one for cards that come from a CMS.
Named areas
The layout of each screen is drawn as a map; the cards themselves do not change.
.bento {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(8rem, auto);
grid-template-areas:
"hero hero num cal"
"hero hero dark cal"
"quote quote sync sync"
"team team sync sync";
}
.bento__hero { grid-area: hero; }
.bento__num { grid-area: num; }
.bento__cal { grid-area: cal; }
.bento__dark { grid-area: dark; }
.bento__quote { grid-area: quote; }
.bento__sync { grid-area: sync; }
.bento__team { grid-area: team; }
/* Tablet: two columns, the main card stays first and large */
@media (max-width: 63.99rem) {
.bento {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"hero hero"
"hero hero"
"num cal"
"dark cal"
"quote quote"
"sync team";
}
}
/* Phone: one column in the order of importance */
@media (max-width: 39.99rem) {
.bento {
grid-template-columns: 1fr;
grid-template-areas: "hero" "num" "quote" "cal" "sync" "team" "dark";
}
}An automatic grid
Sizes by class, gaps filled by dense. Dense changes the order on screen but not in the code — so the important cards go first in the markup.
.bento--auto {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-auto-rows: 10rem;
grid-auto-flow: dense;
}
.card--wide { grid-column: span 2; }
.card--tall { grid-row: span 2; }
.card--big { grid-column: span 2; grid-row: span 2; }
/* On a narrow screen a two-column card would break the grid */
@media (max-width: 30rem) {
.card--wide, .card--big { grid-column: auto; }
}
/* One padding, one radius, one surface for every card */
.bento--auto > * {
padding: var(--space-4);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
}7 rules of a bento grid
-
01
One idea per card
A fact, a number, a feature or a quote — not all at once.
-
02
The main card is the largest
Size shows importance, not the amount of text.
-
03
A small set of sizes
2 × 2, 2 × 1, 1 × 2 and 1 × 1 are enough.
-
04
One gap, one radius
The same for every card — that is what makes the grid calm.
-
05
Two or three accent cards
The rest are neutral, otherwise nothing stands out.
-
06
Rebuild for every screen
In the order of importance, not by squeezing four columns into one.
-
07
Order in the code
Important cards go first in the markup — for the keyboard and screen readers.
Common mistakes with bento grids
-
Several ideas in one card
The card turns into a small crowded page.
-
Different radii and gaps
The grid looks assembled from different kits.
-
Every card is bright
Eight accents — and none is noticed.
-
Four columns squeezed into a phone
Tiny cards with text that cannot be read.
-
Sizes by the amount of text
The longest text gets the largest card, not the most important one.
-
The whole page in bento
Explanations, prices and forms lose their sequence.
Questions about bento grids
What is a bento grid?
A layout of cards of different sizes in one strict grid, like compartments of a bento box: one card, one idea.
How do I make a bento grid in CSS?
With CSS grid: grid-template-areas for a hand-placed layout or span classes with grid-auto-flow: dense for an automatic one.
How does a bento grid work on a phone?
It becomes one or two columns in the order of importance; the main card stays first and largest.
How many cards should a bento block have?
Usually five to nine. More turns into a catalogue that is better shown as a regular grid.
Is bento a passing trend?
The look may get tired, but the idea — one card, one idea, sizes by importance — is a basic layout principle and stays.
Is bento accessible?
Yes, if the order in the code matches the importance and every card has a heading or a clear first line.
Online form
A grid that tells
the story
I design feature pages and portfolios on bento grids that stay neat on every screen. Tell me about the project — I answer within one working day.