Bento grid
A grid of rounded tiles in mixed sizes, packed like a bento box, each holding one feature, stat, or screenshot.
See it
What it is
A bento grid packs rounded tiles of deliberately unequal sizes into one tight grid, like the compartments of a Japanese bento box. Each tile holds exactly one idea: a feature, a stat, a screenshot, a quote. The mixed sizes do the ranking for you, so the reader knows what matters without a single heading level.
Reach for it on feature sections and marketing pages where you have six to nine things to say and no appetite for six paragraphs. Apple keynote slides made the modern version famous, and Microsoft's Metro live tiles were the boxy ancestor. The mechanics are plain CSS Grid: a fixed column count plus column-span and row-span on the tiles you want to be bigger.
Gotcha: the composition is the whole point, and it dies on mobile when every tile collapses to one full-width column and you are left with a stack of cards. Design the narrow arrangement on purpose, and vary tile sizes because a tile deserves more room, not because variety looks nice.
Ask AI for it
Build a bento grid feature section: CSS Grid, 4 columns on desktop, uniform gap of 16px, tiles with 16px to 24px border radius, subtle border and a slightly lighter surface than the page background. Make one hero tile span 2 columns and 2 rows, two tiles span 2 columns, and the rest 1x1. One idea per tile: short bold label, one line of supporting text, and an icon or small visual. Collapse to 2 columns on tablet and 1 column on mobile, keeping the hero tile first.