VOCABULARY / 词条
卡片网格
Card Grid
把一组结构相同的卡片按重复的行列网格排列，每张卡片代表一个可点开的内容单元，通常由图片、标题、摘要与操作组成。
示意图 · 编辑插画，尚无可操作示例
识别特征
- 重复的行列网格，随宽度改变列数
- 每张卡片结构一致：图片区、标题、简短文字、操作
- 每张卡片对应一个可进入的内容单元
概念边界
是页面级布局，不是卡片这一组件本身；与 Bento 网格的区别在于卡片同构且尺寸一致，不靠块面大小制造层级。卡片若结构各异、字段位置不可预期，就失去可扫视性。
什么时候考虑它
- 浏览一组并列、同类型且以图片或标题识别的条目，如作品、商品、文章
- 每个条目需要同时展示图文摘要与入口
- 条目数量会随内容增长，需要自动换行与响应式列数
什么时候慎用
- 用户需要逐字段精确比较大量条目时，表格或纵向列表更可扫视
- 内容之间需要明显主次层级时，可考虑 Bento 网格或主从布局
- 条目只有一行文字、没有图像时，卡片容器只增加噪音
取舍
图文并列便于识别与浏览；但相比列表，卡片位置对眼睛的可预期性较低，若卡片内部结构不一致会更难比较。整卡可点与卡内次级操作之间需要处理焦点与点击目标的关系。
条件规则 · 编辑建议
当网格中的卡片承载同类型条目必须保持每张卡片的字段种类、顺序与位置一致，让用户可以扫视并逐项比较。
当整张卡片可点击必须每张卡片只保留一个可聚焦的主链接，用样式扩展点击区域；卡内次级操作单独可聚焦且不与主链接嵌套。
当列数随视口变化建议只改变视觉排列，不用网格放置改变卡片的逻辑顺序。
相关词条
Bento 网格 ↗条件替代 · 内容之间存在明显主次
Bento 用不同块面尺寸表达层级，卡片网格用同构卡片表达并列。
主从布局 ↗可以配合 · 点开卡片后需要在同一页面查看详情
卡片网格可以充当主列表，详情面板承接选中项。
相似律 ↗提供解释 · 决定卡片的视觉结构
同构卡片依赖相似律让用户把它们识别为同一类条目。
来源与支持范围
Nielsen Norman Group · Cards: UI-Component Definition ↗
把卡片定义为承载少量相关信息、代表一个概念单元的可链接容器；并指出卡片布局比列表更不易扫视，且当卡片结构不可预期时不利于比较。
检索日期：2026-09-15Inclusive Components · Cards ↗
建议每张卡片只保留一个描述性的主链接作为焦点停靠点，用伪元素扩展点击区域而不是把整张卡片包进链接，并用 Grid 或 Flexbox 让卡片等高。
检索日期：2026-09-15定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。
类型扩展与实现说明
尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：卡片字段是否真的同构、每张卡片的焦点数量、整卡点击与次级操作的冲突、以及单栏时的阅读顺序。
{
"states": [
"multi-column",
"single-column"
],
"a11y": [
"每张卡片一个主焦点停靠点，次级操作可单独聚焦",
"DOM 顺序与视觉阅读顺序一致"
],
"motion": "无"
}打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段，并附上来源、存档与编辑声明。