gap在旧浏览器中未被解析，仅对display: grid/inline-grid容器生效，需用row-gap/column-gap兼容，且列定义需留余量或使用弹性单位，否则gap被挤压失效。
gap 在旧浏览器里不是“不生效”，是压根没被解析——Safari ≤14.0、iOS ≤14.4、Android WebView ≤75、IE 全系、Edge 16–18 这些内核直接丢弃该声明，连灰色提示或报错都不会有。
确认父容器是否真启用了 Grid 布局
gap 只对
display: grid 或
display: inline-grid 的容器起作用，写在子项上、写错值（比如
display: grid-flow）、或被 JS 动态覆盖成
flex 都会导致失效。
- 用 DevTools 选中容器 →「Computed」面板搜
display，值必须是 grid 或 inline-grid
-
display: subgrid 不支持 gap，且不会继承父级的 gap
- 某些 CSS-in-JS 库或 Tailwind 默认禁用
gap，需检查是否被重置
旧内核根本不认识 gap，得用 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 默认不转换 gap，需显式配置 grid: true，且源码里必须写 gap 才能触发补全
grid-template-columns 写死像素，gap 就没空间可分配
写了
gap: 16px 却看不到空隙？很可能是列定义太刚性，浏览器优先保证列宽，把
gap 压成 0。
- 例如：
grid-template-columns: 500px 500px，容器总宽刚好 1000px → gap 被挤掉
- 改用弹性列：
1fr 1fr 或 minmax(0, 1fr) 1fr，让轨道能收缩，给 gap 留出生效余地
- 若必须固定宽，至少预留余量：比如两列各
490px，容器 width: 1000px，才能撑开 gap
用 margin 模拟 gap 时，box-sizing 和清除逻辑缺一不可
这是兼容性最强的 fallback，但默认行为极易出错。
- 所有 grid item 必须加
box-sizing: border-box，否则 margin-right: 12px + width: 50% 会让实际宽度超 100%，导致换行或滚动条
- 横向间隙用
margin-right，最后一列要清除：.item:nth-child(3n) { margin-right: 0; }（假设每行 3 列）
- 纵向同理，用
margin-bottom + 清除最后一行；响应式断点变化时，:nth-child 表达式也得同步调整
真正容易被忽略的点，不是“怎么写
gap”，而是它是否真正在一个被正确识别为 Grid 的容器上、被一个有能力解析它的引擎处理——这两层验证缺一不可。
