Safari 14.0及更早版本完全忽略gap简写（含单值、双值及-webkit-gap），必须拆分为row-gap和column-gap才能生效；其根本原因是WebKit引擎未实现该规范，而非代码错误。
gap 在 Safari 14.0 及更早版本中完全不生效，不是写法错，是浏览器根本忽略该声明；必须拆成 row-gap 和 column-gap 才能可靠工作。
为什么 gap: 16px 在 iOS 14.0–14.4 真机上“消失”
这不是 CSS 加载失败或选择器错误，而是 Safari 14.0 的渲染引擎（WebKit）对 CSS Grid/Flex 布局规范的实现尚未覆盖 gap 简写语法。它支持 row-gap 和 column-gap，但会静默丢弃所有 gap 声明——包括单值 gap: 12px、双值 gap: 12px 8px，甚至带单位的 gap: 1rem。
DevTools 的 Computed 面板里查不到 gap 计算值，-webkit-gap 同样无效，别浪费时间加前缀。
- 对应系统版本：iOS 14.0–14.4（Safari 版本即为 14.0–14.4）
- 影响范围：截至 2026 年 10 月，仍有约 3% 的存量移动端用户处于该环境
- 验证方式：真机调试 > 开启 Web Inspector > 查看 Computed 标签页，确认
gap是否出现
row-gap 和 column-gap 是当前最安全的写法
这两个属性在 Chrome for Android、Firefox for iOS、Safari ≥14.0、Edge ≥90 中全部原生支持，且语义明确、无歧义。它们不是降级方案，而是面向真实兼容瓶颈的首选实践。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 等距布局直接写：
row-gap: 16px; column-gap: 16px; - 非对称场景（如卡片列表垂直紧凑、水平宽松）：
row-gap: 8px; column-gap: 24px; - 仅需列间距（如横向滚动导航栏）：
row-gap: 0; column-gap: 12px; - 绝对避免混用：
gap: 16px和row-gap: 8px同时存在时，后者会覆盖行间距，但列间距仍取16px，视觉失衡
Flex 容器中 row-gap 不起作用的常见原因
row-gap 在 Flex 布局中只对多行生效，前提是容器已启用换行。单行 Flex 下，row-gap 没有作用对象，自然“不可见”。
- 必须显式设置：
flex-wrap: wrap（或wrap-reverse） - 子项不能设
flex-shrink: 0且内容过宽，否则可能强制单行渲染，导致row-gap失效 - 若容器高度受限（如
max-height过小），实际只渲染一行，row-gap也无从体现；可临时加min-height: 300px验证 -
display: inline-flex同样支持row-gap，但要注意父容器是否限制了行内元素的高度计算
Grid 布局中 gap 类属性被忽略的隐藏条件
即使写了 row-gap 和 column-gap，也可能因底层结构未满足前提而失效：
- 父容器
display必须是grid或inline-grid；若仍是block，整个 gap 体系不启动 - 子项设了
display: none—— 它不参与网格轨道计算，gap 对其无意义 - 使用
grid-auto-flow: column时，column-gap控制的是“列之间”的水平间距，而“行之间”的垂直间距仍由row-gap控制；别误以为列流就不需要row-gap - 单位限制：
gap系属性不支持百分比（%），只接受px、rem、em、vh等长度单位
真正难的不是让 gap 显示出来，而是当设计稿要求“第一组卡片 gap 24px，第二组缩到 8px”时，得立刻意识到 gap 是容器级统一控制——这种差异必须靠拆成两个独立容器实现，而不是试图用 :nth-child() 去 hack 子项的 gap。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
