gap仅在display: grid或inline-grid容器上生效，若父容器为block、flex或拼写错误（如grid-flow），gap将被忽略；旧版浏览器（如Safari≤14.0）不支持gap，需用grid-row-gap和grid-column-gap替代，并确保列定义留出间隙空间。
父容器根本没启用 Grid 布局
gap 只在 display: grid 或 display: inline-grid 的容器上起作用，写在 display: block、display: flex 甚至拼错成 display: grid-flow 的元素上，它就完全被忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具选中父容器 → 切到「Computed」面板 → 搜索
display，确认值确实是grid或inline-grid - 别在子项上写
gap—— 它只属于容器，不是子项样式 -
display: subgrid不支持gap，也不会继承父级的gap值
浏览器根本不认识 gap 这个属性
Safari ≤14.0、iOS ≤14.4、Android WebView ≤75、IE 全系、Edge 16–18 这些环境会静默丢弃 gap，连报错或警告都不会有。DevTools 里它显示为灰色或带删除线，getComputedStyle(el).gap 返回空字符串 "" 或 "normal"，就是实锤。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测必须用
@supports (grid-row-gap: 0) and (row-gap: 0)，@supports (gap: 0)在 Safari 14.1 是伪支持陷阱 - 旧引擎只认 Level 1 属性：
grid-row-gap和grid-column-gap必须同时写，缺一不可 - autoprefixer 需显式配置
grid: true，且源码里必须写gap: 12px才能触发补全
grid-template-columns 把 gap “挤没了”
写了 gap: 16px 却看不到空隙？很可能是列定义太死板。比如 grid-template-columns: 500px 500px，而容器总宽刚好 1000px，浏览器优先保证列宽，gap 就被压缩为 0。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用弹性列定义：
1fr 1fr或minmax(0, 1fr) 1fr，给gap留出生效余地 - 响应式断点退化为单列时，
column-gap自然不可见（但row-gap仍有效） - 避免在旧引擎中用
rem或em作gap单位，优先用px
用 margin 模拟 gap 时漏了关键声明
当必须降级到 margin 时，以下三项缺一不可，否则旧 Safari 里会出滚动条、换行错位或内容截断：
-
overflow: hidden加在容器上——Safari 对负 margin 的overflow计算有 bug -
min-width: 0加在每个子项上——防止长文本或图片撑宽破坏flex-shrink行为 -
box-sizing: border-box加在子项上——避免padding+border导致尺寸失控
真正容易被忽略的是 min-width: 0 —— 它几乎从不被主动写，但一旦子项含未折行文本，没它就会溢出容器、触发横向滚动。
