Tools
Bento Grid Builder
The uneven, magazine-style grid everyone is shipping in 2026. Pick a layout, tune the gap and
radius, and copy ready-to-use grid-template CSS. Nothing uploaded.
CSS
About bento grids
The "bento" look, named for the compartmentalized Japanese lunchbox, mixes large and small tiles into one
tidy grid. It's everywhere in 2026 product and marketing design because it packs varied content into a calm,
scannable rhythm. The trick is plain CSS Grid: a fixed column count plus a few cells that
span extra columns or rows.
Each preset above is just grid-template-columns with per-cell grid-column /
grid-row spans. Drop your real content into the cells, pair it with a
palette, and round the corners to match your radius
system.