Bento Grid Layouts

When to use this

• You are building a feature showcase, dashboard overview, or portfolio grid with mixed-size cells.
• You need cell size to communicate content importance (larger = more important).
• You want responsive collapse that preserves hierarchy rather than linearizing everything.
• You need distinct interior treatments per cell (some have images, some have stats, some have interactive elements).
• Do NOT use this when you need a Swiss/International editorial grid with asymmetric columns and baseline alignment; use swiss-editorial-grid instead.

Mental model

A bento grid (named after the compartmentalized Japanese lunchbox) is a mosaic of unequal-sized cells arranged on a grid. Unlike a uniform card grid, bento cells vary in size and shape. The size variation is the design: the largest cell is the most important content, and size diminishes with importance.

The grid is defined with grid-template-areas, which lets you name regions and span them across rows and columns. This is more readable than numeric grid placement for complex layouts and makes responsive variants easier to reason about.

The generic bento cliche (2024-2026) is a 4x4 grid with gradient-filled cells, uniform padding, identical border-radius, and no real content. It looks like a design tool screenshot, not a designed layout. To avoid this: every cell must have distinct interior treatment, sizes must reflect content hierarchy (not just visual balance), and the grid must respond to its content rather than being a container for decorative tiles.