grid-gap在旧版Safari≤10.1、IE、Android 4.4 WebView中被解析器直接丢弃，因其是Level 2属性，旧引擎仅支持Level 1的grid-row-gap和grid-column-gap；IE连二者都不支持，需降级为margin+box-sizing方案。
旧版 Safari（≤10.1 / iOS ≤15.3）、IE、Android 4.4 内置 WebView 等浏览器根本不会解析 grid-gap，它不是“没效果”，而是被解析器直接丢弃——布局错位是必然结果，不是代码写错了。
为什么 grid-gap 在旧浏览器里等于没写
grid-gap 是 CSS Grid Level 2 新增的简写属性，而旧引擎只认 Level 1 的 grid-row-gap 和 grid-column-gap。Safari ≤10.1 虽支持这两个属性，但完全无视 gap；IE 则连 grid-row-gap 都不支持，display: grid 本身就被忽略。
- 常见现象：本地 Chrome 看着正常，一上 iPad（iOS 15.2）或内网 IE11 就所有子项紧贴堆叠，网格“塌”成单列
- Autoprefixer 默认不处理
grid-gap→ 即使配了grid: true，也只展开为grid-row-gap/grid-column-gap，不加-webkit-前缀 - 别信“加前缀就行”：
-webkit-grid-gap在 Safari 10.1 中无效，必须手写双属性
必须改用 grid-row-gap + grid-column-gap
这是兼容性最稳的纯 CSS 方案，适用于 Safari ≤10.1、Chrome ≤56、Firefox ≤51 等旧引擎。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 写法要拆开：用
grid-row-gap: 12px和grid-column-gap: 12px替代gap: 12px，不能只写其中一个 - Safari 10.1 支持
grid-row-gap，但若只写grid-row-gap不写grid-column-gap，列方向依然无间隙 - IE11 完全不支持这两个属性 → 此时需降级到
margin方案（见下条），grid-row-gap在 IE 里会被静默忽略 - 注意单位：避免用
rem或em，旧引擎对相对单位在 gap 中计算不稳定，优先用px或vh
IE11 或完全无 Grid 支持的环境：用 margin + box-sizing
当目标环境包含 IE11、Android 4.4 WebView 或某些老旧 Electron 版本时，grid-row-gap 无效，必须 fallback 到 margin 模拟。
立即学习“前端免费学习笔记（深入）”；
- 所有 grid item 必须加
box-sizing: border-box，否则margin-right会让总宽超 100%，引发换行错乱或横向滚动条 - 水平间隙：用
.grid > *:not(:last-child) { margin-right: 12px; }；垂直间隙：用.grid > *:not(:last-child) { margin-bottom: 12px; } - 如果网格启用
flex-wrap或有动态行数，:not(:last-child)会失效（它只管 DOM 顺序，不管视觉换行）→ 此时需 JS 插入占位元素，或改用inline-block+font-size: 0 - 慎用负 margin 父容器 hack（如
margin: -12px）：旧引擎中易触发渲染 bug，尤其配合overflow: hidden时
容易被忽略的陷阱：gap 计算会影响轨道尺寸
gap 不是“画上去的空白”，它参与容器尺寸分配——3 列 + 2 个 12px gap，实际占用宽度 = 列宽总和 + 24px。这点在旧浏览器 fallback 时极易翻车。
- 用
margin模拟时，若子项用了width: calc(33.333% - 12px)，必须把 gap 值从计算中减掉，否则会撑破容器 - IE11 中
calc()对%和px混合运算支持差，建议用固定像素列宽（如width: 200px）或百分比整除（width: 33.33%） - 小屏下多个 gap 累加吃掉大量空间 → 建议媒体查询中将 gap 从
16px降到8px，避免min-width子项被挤出网格
