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.