卡片网格

Card Grid

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

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

详细解释

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

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

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

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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