gap必须写在grid容器上而非卡片上，值需配合minmax()与视口宽度协调，推荐起始值12px；旧名grid-gap已废弃，无需前缀。
用 gap 控制仪表盘卡片间隙是正确做法，但很多人写错位置、配错值，或误以为加了 gap 就万事大吉。
gap 必须写在 grid 容器上，不是卡片上
常见错误是给每个卡片加 margin-right 或 margin-bottom，结果最后一行/列多出空白，响应式时错位更严重。浏览器根本不会“智能收掉”这些 margin，尤其在 auto-fit 动态列数下会直接算崩。
-
gap是容器级属性，只作用于网格项之间的空隙，不参与外边距折叠（no margin collapse） - 写在子元素（如卡片）上的
margin会被忽略，或干扰minmax()的宽度协商 - 若某卡片用了
position: absolute，它就脱离网格流，不占gap空间，也不受其影响
gap 值要配合 minmax() 的临界点来调
仪表盘卡片常需固定最小宽度（比如 minmax(250px, 1fr)），而 gap 实际占用的是“可用内宽”。如果 gap 太大，小屏下连一列都塞不下，auto-fit 就只能退成单列——这不是 bug，是计算逻辑使然。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 推荐起始值：
gap: 12px（比 16px 更适配窄屏，尤其 iPhone SE 的 375px 宽） - 若用
gap: 40px，且卡片最小宽 250px，则容器需 ≥ 250 + 40 = 290px 才能显示一列；想双列就得 ≥ 250×2 + 40 = 540px - DevTools Layout 面板勾选 “Show line numbers”，能看到空轨道是否被
auto-fit折叠：没折叠说明gap或minmax()设置让浏览器“不敢减列”
旧名 grid-gap 已废弃，别加前缀
grid-gap 在所有主流浏览器（Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+）中已完全被 gap 取代，无需任何厂商前缀。
立即学习“前端免费学习笔记（深入）”；
- 写
grid-gap: 12px不报错，但属于冗余写法，未来可能被规范移除 -
gap对display: inline-grid容器同样有效，这点和旧版grid-gap一致 - 注意：若父容器本身是
inline-block或浮动导致宽度塌陷，gap再对也没用——先确保容器有明确宽度
真正难的不是写对 gap，而是理解它和 minmax()、容器宽度、设备视口三者之间的数值博弈。少调 2px gap，可能就多出一列；多设 10px min-width，就卡死在单列。这类细节不看 DevTools 的 Layout 面板，光靠眼睛根本看不出问题在哪。
