卡片网格

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：卡片字段是否真的同构、每张卡片的焦点数量、整卡点击与次级操作的冲突、以及单栏时的阅读顺序。

{
  "states": [
    "multi-column",
    "single-column"
  ],
  "a11y": [
    "每张卡片一个主焦点停靠点，次级操作可单独聚焦",
    "DOM 顺序与视觉阅读顺序一致"
  ],
  "motion": "无"
}

{
  "id": "card-grid",
  "type": "layout",
  "name": {
    "zh": "卡片网格",
    "en": "Card Grid"
  },
  "aliases": [
    "卡片流",
    "Card Layout",
    "Card Collection"
  ],
  "granularity": "page",
  "intents": [
    "overview",
    "organize-content",
    "browse-detail"
  ],
  "tags": [
    "网格",
    "卡片",
    "同构",
    "可扫视",
    "布局"
  ],
  "definition": "把一组结构相同的卡片按重复的行列网格排列，每张卡片代表一个可点开的内容单元，通常由图片、标题、摘要与操作组成。",
  "boundary": "是页面级布局，不是卡片这一组件本身；与 Bento 网格的区别在于卡片同构且尺寸一致，不靠块面大小制造层级。卡片若结构各异、字段位置不可预期，就失去可扫视性。",
  "signature": [
    "重复的行列网格，随宽度改变列数",
    "每张卡片结构一致：图片区、标题、简短文字、操作",
    "每张卡片对应一个可进入的内容单元"
  ],
  "when": [
    "浏览一组并列、同类型且以图片或标题识别的条目，如作品、商品、文章",
    "每个条目需要同时展示图文摘要与入口",
    "条目数量会随内容增长，需要自动换行与响应式列数"
  ],
  "when_not": [
    "用户需要逐字段精确比较大量条目时，表格或纵向列表更可扫视",
    "内容之间需要明显主次层级时，可考虑 Bento 网格或主从布局",
    "条目只有一行文字、没有图像时，卡片容器只增加噪音"
  ],
  "tradeoff": "图文并列便于识别与浏览；但相比列表，卡片位置对眼睛的可预期性较低，若卡片内部结构不一致会更难比较。整卡可点与卡内次级操作之间需要处理焦点与点击目标的关系。",
  "comparison": {
    "focus": "并列浏览一组同类型的内容单元",
    "mechanism": "重复网格与同构卡片",
    "cost": "需要保持卡片结构一致与合理的键盘焦点数量"
  },
  "sources": [
    {
      "id": "card-grid-nng",
      "title": "Nielsen Norman Group · Cards: UI-Component Definition",
      "url": "https://www.nngroup.com/articles/cards-component/",
      "claim": "把卡片定义为承载少量相关信息、代表一个概念单元的可链接容器；并指出卡片布局比列表更不易扫视，且当卡片结构不可预期时不利于比较。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/cards-component/",
        "status": "available",
        "checkedAt": "2026-09-15T18:20:13.921Z",
        "jobId": "spn2-ec8dcda9b31912f63635197722e033f5da5ffae4",
        "url": "https://web.archive.org/web/20260915182038/https://www.nngroup.com/articles/cards-component/",
        "timestamp": "20260915182038"
      }
    },
    {
      "id": "card-grid-inclusive-components",
      "title": "Inclusive Components · Cards",
      "url": "https://inclusive-components.design/cards/",
      "claim": "建议每张卡片只保留一个描述性的主链接作为焦点停靠点，用伪元素扩展点击区域而不是把整张卡片包进链接，并用 Grid 或 Flexbox 让卡片等高。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://inclusive-components.design/cards/",
        "status": "available",
        "checkedAt": "2026-09-15T18:20:13.923Z",
        "jobId": "spn2-8c80527d9fe01765b97d02918311e726760877e2",
        "url": "https://web.archive.org/web/20260915182139/https://inclusive-components.design/cards/",
        "timestamp": "20260915182139"
      }
    },
    {
      "id": "card-grid-mdn-a11y",
      "title": "MDN · Grid layout and accessibility",
      "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility",
      "claim": "说明网格的视觉重排不改变文档顺序与键盘遍历顺序，作者只能用网格放置做视觉而非逻辑重排。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility",
        "status": "available",
        "checkedAt": "2026-09-15T18:29:58.748Z",
        "jobId": "spn2-bf1ca2741c8446f855c995e13f036afd2ef6e6ab",
        "url": "https://web.archive.org/web/20260915183028/https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Accessibility",
        "timestamp": "20260915183028"
      }
    }
  ],
  "relations": [
    {
      "target": "bento",
      "kind": "alternative",
      "condition": "内容之间存在明显主次",
      "reason": "Bento 用不同块面尺寸表达层级，卡片网格用同构卡片表达并列。",
      "basis": "editorial"
    },
    {
      "target": "master-detail",
      "kind": "composes_with",
      "condition": "点开卡片后需要在同一页面查看详情",
      "reason": "卡片网格可以充当主列表，详情面板承接选中项。",
      "basis": "editorial"
    },
    {
      "target": "similarity",
      "kind": "informs",
      "condition": "决定卡片的视觉结构",
      "reason": "同构卡片依赖相似律让用户把它们识别为同一类条目。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "网格中的卡片承载同类型条目",
      "instruction": "保持每张卡片的字段种类、顺序与位置一致，让用户可以扫视并逐项比较。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "整张卡片可点击",
      "instruction": "每张卡片只保留一个可聚焦的主链接，用样式扩展点击区域；卡内次级操作单独可聚焦且不与主链接嵌套。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "列数随视口变化",
      "instruction": "只改变视觉排列，不用网格放置改变卡片的逻辑顺序。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "multi-column",
      "single-column"
    ],
    "a11y": [
      "每张卡片一个主焦点停靠点，次级操作可单独聚焦",
      "DOM 顺序与视觉阅读顺序一致"
    ],
    "motion": "无"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：卡片字段是否真的同构、每张卡片的焦点数量、整卡点击与次级操作的冲突、以及单栏时的阅读顺序。",
  "image": {
    "src": "/images/card-grid.webp",
    "alt": "一个虚构的 FIELDNOTES 页面，以三列两行排列六张结构相同的卡片，每张卡片含图片区、标题条、两行文字和一个小操作按钮。"
  },
  "searchTerms": [
    "grid",
    "cards",
    "homogeneous",
    "scannable",
    "layout"
  ]
}