use UI

Bento Grid

Also called mosaic grid, feature grid, masonry, dashboard grid

A grid of unequal cells where each cell's size signals its relative importance.

Example

  • Design tokens

    One source for colour, spacing and type, exported to every platform that has to agree with the others.

  • Palette

    Scales generated in OKLCH, so the lightness steps stay even.

  • Contrast

    Every foreground and background pair checked against WCAG.

  • Easing

    Curves you can feel.

  • Shadows

    Layered, not blurred once.

  • Motion

    Duration matches distance.

6 of 6 cells are on screen. Nothing is behind a control. Importance is carried by area and type size, so the largest cell is read first by eye — and, because it is also first in the markup, by a screen reader and by the Tab key.

The small numbers are DOM order. Follow them around the grid: they never jump backwards. That is the whole discipline — write the cells in reading order, then size them, never the reverse.

When to use it

  • A set of features, metrics or highlights should all be visible without interaction.
  • The items are genuinely unequal, and the biggest one deserves to be read first.
  • The page is being scanned rather than read — a landing section, a dashboard, an overview.

When not to

  • The items are equal. Unequal boxes then claim a hierarchy that does not exist, and readers spend effort deciding it does not matter.
  • There are more than about eight cells. Past that the sizes stop reading as ranking and start reading as noise.
  • The content is a list to compare item by item. Aligned rows beat an artful mosaic every time.

Trade-offs

  • Nothing is hidden, so nothing depends on a user pressing anything.
  • Hierarchy is legible before a single word is read.
  • Collapses honestly on narrow screens: the same cells, stacked in the same order.
  • Tempting to place cells by eye, which detaches visual order from DOM order and scrambles the keyboard path.
  • Cell contents differ in length, so a beautiful arrangement at one width breaks at another.
  • Uneven density makes it hard to add a ninth item later without redesigning the whole block.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • Tab order follows the DOM, not the picture. If `order`, `grid-area` or dense packing moves a cell visually, the keyboard still goes the old way.
  • Test by tabbing through once: if focus jumps backwards across the screen, the layout and the markup disagree and the markup should change.
  • One tab stop per interactive cell. A card-sized cell with four links inside it is four stops before the next cell.
Roles and state
  • Cells are not a `grid` in the ARIA sense — that role is for spreadsheet-like widgets with cell navigation. A bento grid is a `<ul>` of items or plain sections.
  • Give each cell a heading if it has one visually, and keep the heading levels sequential — the sizes are visual weight, not document structure.
  • Do not encode the ranking only in size. The most important cell should also read first.
Focus
Focus rings must survive the layout: cells with `overflow: hidden` clip the ring on edge cells unless there is room for the offset.

In the wild

  • Apple product pages — The layout the pattern is named after: unequal tiles, largest claim first, everything on one screen.
  • Linear's marketing site — Feature bento with one dominant cell and smaller supporting ones, stacking in the same order on mobile.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.