Bento Grid Layout Generator
Mixed-size tiles in a tight, deliberate arrangement — the Apple keynote look.
1040px
11fr21fr31fr41fr5
1minmax(160px, auto)2minmax(160px, auto)3
feature1 / 1 / 3 / 3
tile-a1 / 3 / 2 / 4
tile-b1 / 4 / 2 / 5
tile-c2 / 3 / 3 / 5
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.bento {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: minmax(140px, auto) minmax(140px, auto) minmax(140px, auto);
gap: 12px;
grid-template-areas:
"feature feature"
"tile-a tile-b"
"tile-c tile-c";
}
.bento > .feature { grid-area: feature; }
.bento > .tile-a { grid-area: tile-a; }
.bento > .tile-b { grid-area: tile-b; }
.bento > .tile-c { grid-area: tile-c; }
@media (min-width: 860px) {
.bento {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: minmax(160px, auto) minmax(160px, auto);
gap: 16px;
grid-template-areas:
"feature feature tile-a tile-b"
"feature feature tile-c tile-c";
}
}
How this layout works
A bento grid is just a grid with intentionally uneven spans. The discipline is in keeping the tile sizes to a small set — one big, two medium, a few small — rather than letting every tile be its own size.
Set a fixed row height (minmax(140px, auto)) so tiles keep their proportions instead of collapsing to content height.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
What makes a bento grid look right?
Restraint in the tile sizes. A bento grid is only a grid with uneven spans, and it falls apart when every tile is a different size — pick one large, two medium and a few small, then repeat. Set a fixed row height so tiles keep their proportions.
How do I center a grid in CSS?
Use
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
Set
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
Use
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
Use Grid when things must line up in two directions at once, and Flexbox when content flows along one axis. A page skeleton or dashboard is Grid; a navbar or row of buttons is Flexbox. They nest: Grid for the page, Flexbox inside the cells.