Bento Grid

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"
}

{
  "id": "bento",
  "type": "layout",
  "name": {
    "zh": "Bento 网格",
    "en": "Bento Grid"
  },
  "aliases": [
    "便当布局",
    "Bento Layout"
  ],
  "granularity": "page",
  "intents": [
    "overview",
    "organize-content"
  ],
  "tags": [
    "grid",
    "modules",
    "overview",
    "varying sizes",
    "layout"
  ],
  "definition": "Organize a scannable set of information in differently sized content blocks aligned to a shared grid.",
  "boundary": "This is a layout, not a material or visual style. Varying card sizes alone do not create a useful hierarchy.",
  "signature": [
    "A shared grid",
    "Different column or row spans",
    "Each block carries relatively independent information"
  ],
  "when": [
    "Presenting a small number of different content summaries",
    "Block size can help emphasize priorities"
  ],
  "when_not": [
    "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.",
  "comparison": {
    "focus": "An overview of several information blocks",
    "mechanism": "Grid alignment and block size",
    "cost": "Requires a meaningful reading order"
  },
  "sources": [
    {
      "id": "bento-stylekit",
      "title": "StyleKit · Bento Grid",
      "url": "https://www.stylekit.top/en/styles/bento-grid",
      "claim": "Describes Bento as a grid layout that uses different card sizes to establish hierarchy.",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.stylekit.top/en/styles/bento-grid",
        "status": "available",
        "checkedAt": "2026-09-15T16:49:59.361Z",
        "jobId": "spn2-af6ce4a2a4039075f81f4883a1a1197acf7145a3",
        "url": "https://web.archive.org/web/20260915165025/https://www.stylekit.top/en/styles/bento-grid",
        "timestamp": "20260915165025"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "alternative",
      "condition": "Choosing the main browsing structure",
      "reason": "Different tasks call for different browsing arrangements.",
      "basis": "editorial"
    },
    {
      "target": "swiss",
      "kind": "composes_with",
      "condition": "Using an orderly typographic language",
      "reason": "A grid layout can use Swiss visual styling.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "The layout becomes a single column",
      "instruction": "Preserve semantic order; visual rearrangement must not disrupt keyboard reading order.",
      "strength": "must",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "wide",
      "compact"
    ],
    "a11y": [
      "DOM order follows the content logic"
    ],
    "motion": "None"
  },
  "demo": "bento",
  "version": "0.1.0",
  "editorialStatus": "sample-reviewed",
  "requirements": [],
  "demoCapabilities": [
    "keyboard",
    "reduced_motion"
  ],
  "implementationNote": "Capability tags describe this specimen only; verify the implementation again in a real product.",
  "searchTerms": [
    "网格",
    "模块",
    "概览",
    "不同尺寸",
    "布局"
  ]
}