gap在旧版浏览器中不生效是因safari≤14.1、ios≤14.4、android webview≤75等内核根本不解析该属性；需确认父容器display为grid或inline-grid，且grid-template-columns使用弹性值（如1fr），并用grid-row-gap与grid-column-gap替代或margin模拟。
gap 属性在某些浏览器中不生效，不是你写错了，而是它压根没被解析——Safari ≤14.1、iOS ≤14.4、Android WebView ≤75、IE 全系、Edge 16–18 这些环境会静默忽略 gap，连报错或警告都不会有。
确认父容器是否真正启用了 Grid 布局
最常被忽略的前提：gap 只在 display: grid 或 display: inline-grid 的容器上生效。如果父元素是 block、flex，甚至拼错成 display: grid-flow，gap 就完全无效。
- 用开发者工具选中容器 → 「Computed」面板搜索
display，确认值确实是grid - 别在子项上写
gap—— 它只作用于网格容器本身 -
display: subgrid不支持gap，且不会继承父级的gap值
检查 grid-template-columns 是否“挤死”了 gap 空间
写了 gap: 16px 却看不到空隙？很可能是列定义太死板，没给 gap 留出生效余地。
-
grid-template-columns: 500px 500px+ 容器总宽刚好 1000px → 浏览器优先保证列宽，gap被压缩为 0 - 改用弹性列定义，例如
1fr 1fr或minmax(0, 1fr) 1fr，让轨道能收缩/拉伸，gap才有物理空间可分配 - 响应式断点中若退化为单列，
column-gap自然不可见（但row-gap仍有效）
旧版 Safari 和 WebView 必须用 row-gap/column-gap 替代
gap 是 Level 2 规范属性，而 Safari 10.1–14.0、Chrome 56–65 等中间版本只认分开写的 grid-row-gap 和 grid-column-gap —— 它们不是“备用写法”，而是当时唯一有效的声明。
- 必须同时写两个：
grid-row-gap: 12px+grid-column-gap: 12px；只写一个，另一方向间隙为 0 - 别混用：
gap: 12px和grid-row-gap: 12px共存时，旧引擎可能因解析冲突直接丢弃全部 -
autoprefixer需显式配置grid: true，且源码里必须写gap才能触发补全；写grid-gap它不会转
用 margin 模拟 gap 时，box-sizing 和清除逻辑缺一不可
当目标环境包括 IE11 或 Android 4.4 内置浏览器时，放弃 gap、改用子项 margin 是兼容性最强的 fallback 方案，但默认行为极易出错。
- 所有 grid item 必须加
box-sizing: border-box，否则margin-right: 12px+width: 50%会导致两列超 100%，意外换行或滚动条出现 - 横向间隙推荐
.item:not(:last-child) { margin-right: 12px; }，但 iOS Safari 13.x 不支持:not()，得改用.item:nth-child(n+2) - 最后一行/列的多余
margin必须精准清除，比如每行 3 个就用.item:nth-child(3n)清右距，不能只清:first-child
真正容易被忽略的点：gap 的生效依赖于“容器有富余空间”和“浏览器内核真认识它”。这两条缺一不可，缺了任何一条，你看到的都不是 bug，而是规范定义下的确定行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
