UI Terms visual dictionary

Layouts

Bento grid

A grid layout of varying-size cards arranged like the compartments of a bento box.

Revenue
$24.8k
↑ 12%
Active users
Top rated
This week

Bento grids mix cards of different widths and heights to create visual rhythm. Each cell typically holds one self-contained idea — a feature, a stat, or a media block — and the asymmetry is intentional, not accidental. The name and the format were popularized in the early 2020s, with Apple's product marketing pages often cited as influential examples.

Also called

bento box layoutasymmetric card grid

When to use

  • Marketing pages that showcase several features at once
  • Dashboards where tiles have different content densities
  • Portfolio or gallery sections that need visual variety

When not to use

  • Content lists where items should be visually equal (use a uniform grid)
  • Long-form reading content

Source

Vernacular term, popularized in the early 2020s.