直接用 CSS Grid 可实现干净可控的卡片栅格，无需 Bootstrap；float 和 inline-block 存在塌陷、间隙、响应式维护难等问题，而 Grid 通过 grid-template-columns + auto-fit/minmax 一行代码即可自动适配列数与响应式，兼容现代浏览器（IE 除外）。
直接用 CSS Grid 就能做干净、可控的 HTML 卡片栅格，不需要 Bootstrap 或其他框架——除非你项目里已经强依赖它。
为什么不用 float 或 inline-block 做卡片栅格
float 容易塌陷，需要额外清除；inline-block 有看不见的空白间隙，改 font-size 或注释掉换行才能压掉，维护成本高。更关键的是：它们都不支持按行限制卡片数量（比如“每行最多 3 张”），响应式切换列数时得写一堆媒体查询 + 重复样式。
而 display: grid 天然支持 grid-template-columns 和 auto-fit，一行代码就能实现“容器内自动均分、最小宽度兜底、超出换行”，语义清晰、逻辑集中。
- 常见错误现象：
grid-column: span 2写在卡片上却没生效 → 实际是父容器没设display: grid，或漏了grid-template-columns - 性能影响：Grid 渲染是浏览器原生优化过的，比 JS 计算列宽 + 动态加 class 快得多
- 兼容性：Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+ 都已支持，IE 不支持（如需兼容 IE，才考虑 Bootstrap 的
col-md-4）
用 grid-template-columns + minmax() 控制每行张数
核心就是这一行：
立即学习“前端免费学习笔记（深入）”；
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;
解释一下：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
minmax(280px, 1fr)表示：每张卡片最小 280px，最大占满剩余空间（1fr） -
auto-fit会让浏览器尽可能多地塞进符合最小宽度的列，空余空间平均分配 - 如果容器宽 900px，280×3=840 ≤ 900，就排 3 张；宽 500px 时只能塞下 1 张，自动变单列
-
gap替代了传统 margin 负边距 hack，所有间距统一可控
卡片内部结构别乱用 width: 100%
Grid 子项（即卡片）默认 stretch 对齐，高度会拉满——但如果你在卡片里写了 width: 100%，可能意外撑破父列（尤其当卡片含 padding 或 border 时）。
正确做法：
- 卡片本身不设 width，靠 Grid 列宽控制尺寸
- 内部内容用
box-sizing: border-box（现代 CSS Reset 通常已包含） - 如果卡片要居中文字/图片，用
display: flex; flex-direction: column;+align-items: center，别依赖 text-align 或 margin: auto - 避免在卡片上写
float、position: absolute等破坏 Grid 流式的行为
需要固定列数（比如始终 4 列）怎么办
那就别用 auto-fit，直接写死：
grid-template-columns: repeat(4, 1fr); gap: 16px;
但注意：小屏幕下 4 列会挤成超窄卡片。真要这么做，必须配媒体查询：
- 移动端（
max-width: 768px）→repeat(2, 1fr) - 超小屏（
max-width: 480px）→repeat(1, 1fr) - 别忘了给卡片加
min-width: 0，防止内部长文本溢出破坏列宽
真正容易被忽略的是：Grid 的 gap 在 Firefox 旧版本中对 grid-row-gap/grid-column-gap 兼容更稳，如果团队还在用 Firefox 70 以下，建议拆开写。
