卡片网格布局Card Grid
你可能会说
内容做成一排排卡片，宽了多放几列，窄了自动换行。
卡片网格布局是一种用规则行列排列同类卡片，并随可用宽度换行的页面结构作品、商品和模板列表可将每个项目做成结构相近的卡片 Card，再用 Grid 自动排布。列数和最小卡片宽度要按标题、图片和操作仍能显示来决定；内容差异很大时，不必强求所有卡片完全等高。
你可以这样告诉 AI Agent
请把模板列表做成响应式卡片网格，依据标题、图片和操作确定最小卡宽，用一处 gap 管理间距，容器变窄时自动减少列数。用长标题、缺图和手机宽度验证卡片结构一致。
什么时候用
什么时候不用
- 列数写死 repeat(4, 1fr)，窄屏直接溢出
- 未控制卡片高度：网格行高不齐
- 每张卡片结构不同：列表扫描效率降低
- 格距缺少统一规则：使用一处 gap 管理
组成结构 · Anatomy
卡片
display: grid，定义列和间距
结构一致的成员，同构才好扫读
格子之间的缝，一处声明全管
常见变体 · Variants
自适应列AutoFill
卡片有合理最小宽度、列数需要随容器变化时
固定两列Two Cols
卡片内容多，需要大预览
固定三列Three Cols
内容宽度稳定的后台列表
典型使用场景
作品集展示
商品列表
模板市场
图片素材墙
「夏日」相关素材 12,408 张 · 按热度排序
延伸阅读 · 权威出处
快速练习