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 的容器上、被一个有能力解析它的引擎处理——这两层验证缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
