卡片网格布局
Card Grid
初级通用卡片网格布局（Card Grid）是把一组卡片按行和列排列的页面布局，卡片通常承载同类内容或入口。它解决的是多项内容如何同时展示、方便扫读的问题，比如把 AI 工具库中的工具介绍排成多列。
你可能会说：「帮我把这些工具介绍排成整齐的多列，屏幕变窄时自动减少列数。」
动手看看AI 工具库的卡片列表
文案生成
图片编辑
会议纪要
数据分析
代码助手
翻译润色
语音转写
客服问答
列数 grid-template-columns
每张卡片是一个网格项。浏览器按列数从左到右放卡片，一行放满后就排到下一行，不用逐张指定位置。
三列时，最后一行只有两张卡片，空出的格子会留在右侧；网格不会自动把这两张拉宽来填满整行。
要点卡片网格布局要考虑哪几件事？
- 1
先确定每张卡片装什么
你可以把一张卡片看成一个内容单元，比如工具名称、简短说明和打开入口。因为用户会横向比较多张卡片，所以同一组卡片最好有相近的信息结构。
- 2
再确定列数和卡片间距
列数决定一屏能看到多少项，间距帮助用户分清卡片的边界。列太多会挤压内容，间距太大又会让相关内容显得分散；我们通常结合页面宽度和卡片内容来定。
- 3
让窄屏能自然换列
桌面上排三列的卡片，到了手机上往往需要变成一列。这样做不是单纯缩小卡片，而是给标题、说明和操作留出可读空间；内容变长时也要检查卡片是否仍容易扫读。
容易混淆的地方
卡片是承载内容的单个容器，卡片网格布局说的是多个卡片怎样排列。它也不同于瀑布流：卡片网格通常让列和行保持清楚的对应关系；瀑布流更适合高度差异大的内容，卡片会沿各列向下紧凑排列。
什么时候用
适合用
- 做 AI 工具目录时，每个工具都有名称、用途简介和入口，用户需要同时浏览并挑选。
- 做商品分类页时，每件商品有图片、价格和名称，用户需要快速比较多个选项。
- 做项目作品集时，每个项目都有封面和简介，并希望桌面与手机上都方便浏览。
不适合用
- 做订单后台时，如果用户主要按编号、金额和状态逐行核对，表格更方便比较字段。
- 写一篇需要从头到尾连续阅读的教程时，用正文排版更合适，不必把段落拆成卡片。
- 展示一组图片且图片高宽差异明显、重点是连续浏览时，瀑布流可能比整齐的卡片网格更合适。
练一练选一个答案，看看解释
你在做一个 AI 提示词模板库。每个模板都有标题、用途说明和“查看模板”入口，用户需要浏览几十个模板；页面还要适配手机。你会怎样安排主体内容？
让 AI 帮你做复制给 AI Agent 直接用
请把模板库主体做成卡片网格布局。每张卡片展示标题、简短用途说明和查看入口；桌面上多列排列，屏幕变窄时减少列数。请根据卡片内容设置合适的宽度和间距，并检查手机上的可读性。