gap不生效主因是浏览器兼容性或布局配置错误：safari≤14.0等旧环境静默忽略；父容器未设display:grid/inline-grid；grid-template-columns写死像素挤压gap空间；需用row-gap/column-gap替代gap并同时声明；fallback用margin时须注意box-sizing和清除逻辑。
gap不生效，大概率不是你写错了，而是它压根没被解析或没空间可分配——Safari ≤14.0、IE 全系、Android WebView ≤75、Edge 16–18 这些环境会静默忽略 gap，连 DevTools 都不报错；就算浏览器支持，grid-template-columns 写死像素也会把 gap 压成 0。
确认父容器是否真正启用了 Grid 布局
这是最常被跳过的一步。gap 只在 display: grid 或 display: inline-grid 的直接父容器上有效，写在子项上、flex 容器里、拼错成 display: grid-flow，全都不起作用。
- 用开发者工具选中父容器 →「Computed」面板搜索
display，确认值是grid或inline-grid -
display: subgrid不支持gap，且不会继承父级的gap值 - 别在子元素上写
gap—— 它只作用于容器本身，子项加了也白加
检查 grid-template-columns 是否“挤死”了 gap 空间
写了 gap: 16px 却看不到空隙？很可能是列定义太刚性，浏览器优先保证轨道尺寸，gap 被压缩为 0。
-
grid-template-columns: 500px 500px+ 容器宽刚好 1000px →gap无物理空间可分配 - 改用弹性列：
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 时最容易踩的三个坑
这是兼容 IE11 或 Android 4.4 内置浏览器等“完全无 Grid 支持”环境的最强 fallback，但默认行为极易出错。
- 所有 grid item 必须加
box-sizing: border-box，否则margin-right: 12px+width: 50%会导致两列超 100%，意外换行或滚动条出现 - 横向间隙用
margin-right，但最后一列必须清除：.item:nth-child(3n) { margin-right: 0; }（假设每行 3 列）；纵向同理 - 别靠
:last-child清除，JS 动态插入后会错位；推荐用:nth-child或媒体查询精准控制
真正容易被忽略的是：gap 的“存在感”高度依赖渲染引擎是否识别它，而不是 CSS 层叠是否覆盖。哪怕 @supports (display: grid) 返回 true，也不能说明 gap 可用——Safari 14.0 就是典型“半支持”环境。动手前，先打开真机或对应内核模拟器的 DevTools，直接看 Computed 面板里 gap 或 row-gap 的值是不是 not supported 或空字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
