gap属性在Safari≤14.0、IE全系、Android WebView≤75、Edge 16–18中被直接丢弃，DevTools中显示为灰色或删除线，Computed面板无值；iPhone 12以下未升至iOS 14.5+、微信X5等旧内核浏览器同样不识别。
gap属性在哪些浏览器里根本不会解析
不是“不生效”，是直接被丢弃——Safari ≤14.0、IE 全系、Android WebView ≤75、Edge 16–18 这些内核压根不认识 gap，连报错都不会有。你在 DevTools 的 Styles 面板里看到它显示为灰色或带删除线，Computed 面板搜 gap 返回空字符串或 not supported，就是实锤。
特别注意：iPhone 12 以下机型若系统没升到 iOS 14.5+，Safari 仍跑旧 WebKit 引擎；微信 X5、QQ 浏览器、部分安卓系统浏览器也卡在 Chrome 75 或更早内核，gap 对它们来说等于没写。
用 grid-row-gap 和 grid-column-gap 替代 gap 并不万能
grid-row-gap 和 grid-column-gap 是 Level 1 规范里的老属性，兼容性比 gap 好，但仍有坑：
- 必须两个都写，只写
grid-row-gap: 12px不会自动给列方向加间隙 - Safari 10.1 支持
grid-row-gap，但不支持gap（Level 2 新增），别以为写了gap它会 fallback -
autoprefixer默认不转换gap→grid-row-gap，需显式配置grid: true，且源码里必须写gap才能触发补全 - 别混用：
gap: 12px和grid-row-gap: 12px同时存在，旧引擎可能因解析冲突直接丢弃全部声明
用 margin 模拟 gap 时最常踩的三个坑
这是兼容性最强的 fallback 方案，但默认行为极易出错：
立即学习“前端免费学习笔记（深入）”；
- 所有 grid item 必须加
box-sizing: border-box，否则margin-right会让实际宽度超 100%，导致换行或滚动条意外出现 - 横向间隙用
margin-right，但最后一列必须清除：.item:nth-child(3n) { margin-right: 0; }（假设每行 3 列）；纵向同理，用margin-bottom+ 清除最后一行 -
grid-template-columns写死像素（如500px 500px）会导致 gap 没空间可分配——浏览器优先保证列宽，把 gap 压成 0；得改成1fr 1fr或minmax(0, 1fr) 1fr给 gap 留出生效余地
@supports 检测 gap 支持不可靠
@supports (display: grid) 只能筛掉完全不支持 Grid 的环境（如 IE），但无法识别 Safari 14.0 这类“半支持”浏览器——它认 display: grid，却不认 gap。
真正能兜底的写法是：
- 降级样式（如
display: flex）必须写在@supports外层，现代方案写在里面 - 检测项要更具体：
@supports (display: grid) and (row-gap: 0)比@supports (gap: 0)更稳妥，某些安卓 WebView 对后者解析异常 - 完全放弃
@supports检测旧安卓 WebView（如 Android 4.4），改用 UA 字符串 + 临时元素探测，加.no-grid类切换整套 Flex 布局
真正容易被忽略的是：gap 和子项自带的 margin 同时存在，视觉上“失效”其实是叠加了——比如你设了 gap: 12px，子项又带 margin: 4px，最终间距会变成 16px，调试时容易误判。
