Bento grids

A Japanese lunch box has compartments of different sizes that still make one tidy whole – a bento grid does that to a screen: a large hero item sits naturally beside several smaller supporting items, asymmetric but balanced. Described in current trend coverage as “the gold standard for information density”, and the card’s vignette above is drawn as exactly that – one dominant compartment, two supporting ones.

A sourcing note, kept honest: unlike most entries here, note 16 carries no quoted prompt vocabulary for bento. The phrases below are derived from the note’s own CSS recipe tells, not quoted from anywhere – they’re the recipe restated as briefing anchors.

Where it came from

The popularising moment is Apple’s 2023 keynote slide design (reported analysis found an average of 6-9 boxes per bento slide), but the provenance is genuinely contested: Microsoft’s “Metro” tiles on Windows Phone 7 (2010) used variously-sized modular blocks well over a decade earlier. Both claims are defensible depending on whether “origin” means who tiled first (Microsoft, arguably) or who made this specific soft-rounded, generously-spaced look a mainstream expectation (Apple, more clearly). By mid-2026 adoption has eased – roughly 1.6% of generations in February down to 0.91-1.3% in June – so the honest framing is “still common, past its adoption peak”; both can be true at once. (Single-source figures, as flagged throughout.)

When it fits

Dashboards, feature overviews, product-marketing summaries – anywhere content decomposes into a phrase, a number or one screenshot per cell, and scanning beats reading.

When it’s wrong

Two specific, checkable failure modes. First, an accessibility mismatch: grid-auto-flow: dense visually reorders cells for sighted users while screen readers and keyboard focus still follow DOM order – a genuine divergence, not a hypothetical. Second, a structural limit: bento cells force content down to a phrase, a number or one image, so the format is simply unsuited to long-form content. And if every cell is the same size, the whole point of the pattern’s layout complexity is gone.

Don’t confuse it with

An ordinary card grid – the differences are the size variation (hero beside supports) and the radius floor. Uniform cells under 16px radius is just a grid of cards, whatever the marketing page calls it.

/* ===== style: bento ===== */
/* Compartments, generously rounded: the 20-28px radius floor is a hard
   rule – under 16px the bento read is lost entirely. */
[data-style='bento'] {
  --bg-page: #f5f5f7;
  --bg-raised: #ffffff;
  --bg-active: #e9e9ee;
  --border-default: #86868b;
  --border-hover: #6e6e73;
  --border-input: #86868b;
  --text-primary: #1d1d1f;
  --text-secondary: #4c4c52;
  --accent-solid: #0a5dc2;
  --accent-solid-hover: #084a9b;
  --accent-text: #0a5dc2;
  --on-accent: #ffffff;
  --radius-s: 16px;
  --radius-m: 22px;
  --radius-l: 28px;
  --shadow-1: 0 8px 24px rgba(29, 29, 31, 0.08);
  --shadow-2: 0 12px 32px rgba(29, 29, 31, 0.12);
  --font-sans: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
}
[data-style='bento'] .sty-art {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  border: none;
}
[data-style='bento'] .sty-art > i {
  position: static;
  width: auto;
  height: auto;
  /* The entry's own hard floor: compartments never under 16px, taught
     range 20-28px – the vignette obeys the rule it depicts (review M2). */
  border-radius: 20px;
  opacity: 1;
}
[data-style='bento'] .sty-art .sty-art-a {
  grid-row: 1 / -1;
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
}
[data-style='bento'] .sty-art .sty-art-b {
  background: var(--accent-solid);
}
[data-style='bento'] .sty-art .sty-art-c {
  background: var(--bg-active);
  border: 1px solid var(--border-default);
}
/* Hover: the compartment inflates towards the top of its radius band. */
.sty-card[data-style='bento']:hover {
  border-radius: 26px;
  transform: scale(1.01);
}
/* ===== end bento ===== */