←→ 切换·Esc 返回

卡片网格布局Card Grid

页面结构
让同类卡片随可用宽度自动换行
先知道
卡片 Card网格布局 Grid

卡片网格适合作品、商品和模板列表。列数与卡片最小宽度要根据标题、图片和操作是否还能正常显示来决定；内容差异较大时，不必强求所有卡片完全等高。

什么时候用

  • 卡片同构：每张卡结构一致，扫读不累，见 卡片 Card
    无线耳机¥ 299
    机械键盘¥ 199
  • 使用 Grid 的自动列宽，让卡片随容器换行
  • 间距统一：gap 一处管所有格距，见 间距 Space
  • 同行高度拉齐：卡片一样高，墙面才整齐

什么时候不用

  • 列数写死 repeat(4, 1fr)，窄屏直接溢出
  • 放任内容撑高度，整面墙高高低低
  • 每张卡结构都不一样，像拼贴墙不是列表
  • 格距凭手感忽大忽小：一处 gap 管所有
    ✎★⬇⋯
组成结构 · Anatomy
卡片
1网格容器Containerdisplay: grid，定义列和间距
2卡片Card结构一致的成员，同构才好扫读
3网格间距Gap格子之间的缝，一处声明全管
常见变体 · Variants
自适应列AutoFill
卡片有合理最小宽度、列数需要随容器变化时
固定两列Two Cols
卡片内容多，需要大预览
固定三列Three Cols
内容宽度稳定的后台列表
典型使用场景
作品集展示
山野露营 App
UI 设计 · 2025
效率工具官网
网页设计 · 2025
宠物社区小程序
产品设计 · 2024
商品列表
🎧
降噪耳机 Pro
¥ 899已售 2.3 万
⌨️
机械键盘 87 键
¥ 349已售 8,600
💡
智能护眼台灯
¥ 199包邮
模板市场
SaaS 落地页
Landing · 免费
活动报名页
Event · 免费
博客主题
Blog · ¥ 29
图片素材墙
「夏日」相关素材 12,408 张 · 按热度排序