Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Bento Grid

bento

Add to comparison +
Layout & information architectureScope: Pagebento · v0.1.0

Organize a scannable set of information in differently sized content blocks aligned to a shared grid.

Interactive specimen · Fictional product FIELDNOTES
City notes

Weekend walk

Rediscover the city along its old streets.

Reading

A bookshop

Everyday

After the rain

Recognizing it

  • A shared grid
  • Different column or row spans
  • Each block carries relatively independent information

Concept boundary

This is a layout, not a material or visual style. Varying card sizes alone do not create a useful hierarchy.

When to consider it

  • Presenting a small number of different content summaries
  • Block size can help emphasize priorities

When to be cautious

  • Comparing large amounts of identical fields row by row
  • Inventing meaningless content blocks to fill a grid

Tradeoff

It supports an overview, but visual order, DOM order, and mobile reading order need to be designed together.

Conditional rules · Editorial advice

When The layout becomes a single columnMustPreserve semantic order; visual rearrangement must not disrupt keyboard reading order.

Related entries

Master–Detail ↗Conditional alternative · Choosing the main browsing structure

Different tasks call for different browsing arrangements.

Swiss / International Typographic Style ↗Works with · Using an orderly typographic language

A grid layout can use Swiss visual styling.

Sources and what they support

StyleKit · Bento Grid ↗

Describes Bento as a grid layout that uses different card sizes to establish hierarchy.

Retrieved: 2026-09-15

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

Capability tags describe this specimen only; verify the implementation again in a real product.

{
  "states": [
    "wide",
    "compact"
  ],
  "a11y": [
    "DOM order follows the content logic"
  ],
  "motion": "None"
}

Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.