gap生效需父容器显式声明display: grid/inline-grid或flex/inline-flex；仅Grid支持列间距百分比；Safari 14.0及更早需用row-gap/column-gap；首尾留白须用padding而非gap。
Grid 容器必须显式声明 display: grid
没这一步，gap 就是纯装饰。常见错误是只写了 gap: 12px，但父容器仍是 display: block 或 inline，DevTools 里根本看不到 gap 生效——Computed 面板连这个属性都不显示。
正确写法必须成对出现：
nav.matrix {
display: grid;
gap: 12px;
}
-
gap只在display: grid、display: inline-grid、display: flex、display: inline-flex下有效 - 用
display: contents包裹子项会切断渲染树，gap失效 - 子项设了
display: none，它不参与网格计算，也不占gap位置
gap 值别乱写单位或百分比
gap 不接受无单位数值，也不支持全场景百分比。写错就静默失效，浏览器不报错，但间距归零。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
gap: 12❌ 错误：缺单位，被忽略 -
gap: 12px✅ 行列间距均为 12px -
gap: 8px 16px✅ 行间距 8px、列间距 16px（不是上下/左右） -
gap: 2%⚠️ 仅 Grid 列间距支持，Flex 中完全无效；行间距不支持任何 % -
gap: normal❌ 别依赖，行为不稳定，Chrome 和 Safari 解析不一致
Safari 14.0 及更早版本必须拆开写 row-gap/column-gap
这不是你代码写错了，是 Safari 14.0（对应 iOS 14.0–14.4）压根不解析 gap 简写。你在 DevTools Computed 面板里根本看不到它，页面上也“没间距”，容易误判为 CSS 没加载。
- 安全写法永远是分开声明：
row-gap: 12px; column-gap: 12px; -
-webkit-gap在 Safari 14.0 中同样无效，别加前缀白忙活 - 如果项目需兼容 IE11，得用
grid-row-gap和grid-column-gap（IE11 支持这两个，但不支持gap） - 千万别混用：
gap: 16px; row-gap: 8px;—— 后者会覆盖行间距，列间距却还是 16px，视觉失衡
gap 不能解决首尾留白，padding 才是正解
gap 只管“项与项之间”，不管“项与容器边缘”。很多矩阵导航要求“左右贴边、中间等距”，结果直接给容器加 gap: 12px，发现最左和最右模块紧贴容器边界，明显不对称。
- 首尾留白必须靠容器的
padding：例如padding: 0 16px; - 响应式调整间距时，在媒体查询里改
row-gap/column-gap，别切回margin—— 否则逻辑割裂，维护时容易漏掉某处 - 设计稿若要求“第一组卡片 24px、第二组缩到 8px”，
gap无法差异化控制，必须拆成两个独立容器，各自设不同gap
真正难的不是让 gap 显示出来，而是当它看起来“没生效”时，要快速判断：是容器没设 display: grid，还是 Safari 版本太老，又或者你以为它该管首尾留白——其实那根本不是它的职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
