{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "card-grid",
  "name": {
    "zh": "卡片网格",
    "en": "Card Grid"
  },
  "page": "https://designvocabulary.com/zh/entries/card-grid/",
  "self": "https://designvocabulary.com/zh/entries/card-grid.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/card-grid.json",
    "en": "https://designvocabulary.com/en/entries/card-grid.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "card-grid-nng",
        "url": "https://www.nngroup.com/articles/cards-component/",
        "title": "Nielsen Norman Group · Cards: UI-Component Definition",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915182038/https://www.nngroup.com/articles/cards-component/",
          "capturedAt": "2026-09-15T18:20:38Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/cards-component/"
        }
      },
      {
        "id": "card-grid-inclusive-components",
        "url": "https://inclusive-components.design/cards/",
        "title": "Inclusive Components · Cards",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915182139/https://inclusive-components.design/cards/",
          "capturedAt": "2026-09-15T18:21:39Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://inclusive-components.design/cards/"
        }
      },
      {
        "id": "card-grid-mdn-a11y",
        "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility",
        "title": "MDN · Grid layout and accessibility",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915183028/https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Accessibility",
          "capturedAt": "2026-09-15T18:30:28Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility"
        }
      }
    ],
    "lists": [
      {
        "id": "L-C",
        "edition": "classic",
        "seat": 6,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/L-C/",
        "json": "https://designvocabulary.com/zh/lists/L-C.json"
      },
      {
        "id": "L-Y",
        "edition": "2026-focus",
        "seat": 4,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/L-Y/",
        "json": "https://designvocabulary.com/zh/lists/L-Y.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "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"
    ]
  }
}