首选 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，因其实现纯 CSS 列数自适应，无需 JS 或框架，兼容性好、逻辑清晰、维护成本低。
直接用 display: grid + auto-fit + minmax() 就能搞定，不需要 JS、不依赖框架、一行 CSS 控制列数自适应。其他方案要么兼容性差，要么维护成本高。
为什么 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 是首选
这行代码让浏览器自动计算当前容器能塞下几列，每列最小 300px、最大均分剩余空间。比手动写断点更健壮，也比 flex-wrap 更可控——Flexbox 在窄屏下不会“折行”除非显式设 flex-wrap: wrap，而 Grid 天然按格子填，逻辑更干净。
- 小屏（如 iPhone）：只够一列，
minmax(300px, 1fr)满足最小宽度，自动退为单列 - 平板（768px）：大概率两列，不需额外 media query
- 桌面（1200px+）：轻松撑出三列或四列，取决于内容宽度
- IE11 不支持
auto-fit，得回退用固定列数或repeat(3, 1fr)+ 媒体查询
gap 比 margin 更稳，但别在 Grid 子项上混用
gap 是 Grid/Flex 的原生间距控制，不塌陷、不触发重排、不影响盒模型计算；而给每个卡片加 margin 容易导致最后一行对不齐，尤其配合 justify-content: space-between 时。
- 正确写法：
.grid { display: grid; gap: 20px; }，子项不写 margin - 错误写法：子项加
margin-right: 20px后又用nth-child(3n)清除，逻辑脆弱 - 如果必须兼容 IE11，改用
grid-column-gap: 20px和grid-row-gap: 20px
移动端必须强制单列，不能靠“自动”
哪怕用了 auto-fit，在 320px 宽的屏幕下，若内容块最小宽度设成 280px，仍可能强行挤出两列，导致横向滚动——这是用户最反感的体验之一。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 必须加媒体查询：
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } } - 别用
display: block覆盖 Grid，会破坏整个布局上下文 - 如果主内容需 SEO 优先，用
order调整 DOM 顺序，而不是靠视觉隐藏侧栏
box-sizing: border-box 是隐形地雷，漏掉就错位
几乎所有栅格错位问题，根源都在没统一盒模型。比如你设了 width: 33.33%，但又加了 padding: 16px 和 border: 1px solid，实际宽度就超了 100%。
- 全局第一行 CSS 就该是：
* { box-sizing: border-box; } - 别只给卡片加，要覆盖所有参与布局的元素（包括伪元素）
-
gap不受box-sizing影响，所以它比margin更值得信赖
真正难的不是写出那行 grid-template-columns，而是记住：Grid 是二维系统，不能和 float、inline-block 或未归一化的 margin 混用；一旦混了，调试时看到的“表现异常”，往往不是 Grid 本身的问题，而是布局逻辑冲突。
