跳到主要内容
Termlib

布局模式 · 内容展示

卡片网格

Card Grid

也叫：卡片列表、网格卡片、宫格布局、Card Layout、Grid View

把同一类条目做成大小一致的卡片，按行列整齐排成网格，每张卡片放封面图、标题和少量关键信息。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

用卡片网格（Card Grid）展示项目列表：每行 4 张卡片，间距 16px，卡片等宽等高、白底、圆角 8px；卡片上方是 16:9 封面图，下方是标题（最多一行，超出省略）、两行描述，底部是更新时间和「打开」按钮。平板每行 2 张，手机每行 1 张。

发给

01判断

你的内容是这样吗？

对照两列，确认卡片网格是不是你要找的。

符合这些情况，用卡片网格

  • 条目结构相同、每条只需展示三五个字段，用户靠浏览来挑选时
  • 每条内容都有代表性的封面图或图标、图文并重时
  • 条目数量中等（几十条左右），不需要逐字段对照比较时

是这些情况，换成别的

  • 条目同质、数量多、每条字段较多且需要逐列比较时

    改用数据表

  • 图片高度差异大、希望保留原始比例时

    改用瀑布流

  • 内容几乎只有图片、文字可以省略时

    改用画廊

  • 每条只有一行标题文字、没有配图时

    改用简单列表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    把十几个字段硬塞进卡片，每张卡片都变成一张小表格

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    卡片高度不统一，同一行里参差不齐

  3. 03

    没有配图也强行做成卡片，满屏大白块里只有一行标题

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

若干等宽等高的卡片按行列对齐排成网格，每张卡片从上到下是封面、标题、简短信息和操作按钮。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1多张大小一致的矩形卡片，行列整齐对齐
  2. 2每张卡片上方有图片或图标，下方是标题和简短文字
  3. 3卡片之间有均匀的间距

04解释

详细解释

卡片网格把每条记录装进一张卡片，卡片宽高一致，一行放三到四张，从左到右、从上到下整齐排列。每张卡片通常包括封面图或图标、标题、两三行简短信息和一两个操作按钮，常见于商品列表、项目列表、模板市场。

它的优势是直观、便于挑选：图片占比大，用户扫一眼封面和标题就能决定点哪个。缺点是每张卡片能放的字段有限，而且同一个字段分散在不同卡片里，没法像表格那样按列对齐比较。

它和瀑布流、画廊容易混淆：卡片网格每张卡片等宽等高、行列对齐，图文并重；瀑布流卡片等宽不等高，按列错落排列；画廊几乎只有图片，文字很少。

开发者信息
术语 ID
layout-card-grid
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • :is(div, ul, section):has(> [class*="card" i] + [class*="card" i] + [class*="card" i])
  • :has(> [data-slot="card"] + [data-slot="card"] + [data-slot="card"])
  • :has(> .ant-col > .ant-card):has(> .ant-col + .ant-col + .ant-col)
  • .grid:has(> :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.border, .shadow, .shadow-sm, .shadow-md, .shadow-lg, .ring-1) + :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl):is(.border, .shadow, .shadow-sm, .shadow-md, .shadow-lg, .ring-1) + *)
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • card-grid
  • cards-grid
  • grid-cards
  • cards
  • card-list
  • cards-container
  • tile-grid
  • product-grid
  • grid-list
  • card-row
  • stats-grid
  • stat-grid
  • kpi-grid
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • CardGrid
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 网格排列
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30