PAGES

CSS Grid made bento layouts cheap enough to overuse

The arrangement is not new. What changed is that it stopped costing anything to build.

A wall of printed page proofs pinned in a grid, two people in front, one holding a marker
The arrangement is old. What changed is that it stopped costing anything to build.

The cost came down and the form spread

The bento layout — a grid of rectangular cells, each a different size, sitting flush against their neighbours — has roots well before the web. Apple used it in hardware packaging decades ago. Print designers used it as a matter of course. What changed is that building one on a page became trivial, and when something is trivial, it spreads.

A browser window showing a grid overlay across a laid-out page, devtools open beside it
Named areas turned a two-day layout into a twenty-line declaration.

Before CSS Grid shipped in March 2017 — Chrome 57 and Firefox 52, days apart — a layout like this required either a float-based hack, a deeply nested flexbox scaffold, or JavaScript measuring elements at runtime. Any of those approaches punished the developer for wanting the thing. The punishment was proportional to ambition: more asymmetry meant more fragility.

CSS Grid changed that arithmetic. A named-area layout that would have taken an afternoon to make robust in 2016 takes twenty minutes today. You declare a template, name the areas, assign each child. The browser handles the geometry. Jen Simmons made the specific case for this kind of dense, asymmetric layout as early as her work on layout thinking in the mid-2010s, arguing the web had trained itself into column-and-stacked-card conservatism because that was what the tools made easy.

The question worth asking, each time, is whether the grid organises real differences in content weight — or whether it tiles equivalent things in a shape that looks like it does not.

The argument was correct. When Grid made the full rectangle possible, the industry moved into it almost immediately. Stripe used it on feature sections. Linear pressed dark bento cells into product marketing. Vercel's homepage adopted it. The form passed from editorial choice to genre convention in roughly three years — which is how conventions always spread, not through taste but through availability.

A wall of printed page proofs pinned in a grid, a person standing in front reaching up to move one sheet. Wide, straight on, the wall taller than they are
Pinned in a grid on a wall long before it was pinned in a grid on a page.

What bento grids actually do well is carry mixed content densities. A cell can hold a headline, a diagram, a live component demo or a video, and because every cell is a grid item with its own sizing, the hierarchy is spatial rather than sequential. That is genuinely useful. It is also genuinely overused: a three-row by four-column feature grid does not automatically mean the content inside it has been thought about, and the form is now common enough to carry no signal about craft.

The layout is not going away. The question worth asking, each time, is whether the grid organises real differences in content weight — or whether it tiles equivalent things in a shape that looks like it does not.