gap不生效需确认父容器display为grid或inline-grid，检查兼容性、grid-template-columns是否挤压空间、margin干扰、display: contents影响及隐式轨道生成。
gap不生效？先确认父容器是display: grid
gap只在真正的网格容器上起作用，不是所有写了gap的地方都能生效。最常见的情况是：父元素实际是display: block、display: inline甚至display: flex，却误以为加了gap就能控制子项间距。
实操建议：
- 用浏览器开发者工具选中父容器 → 切到「Computed」面板 → 搜索
display，确认值确实是grid或inline-grid - 别写错值，比如
display: grid-flow或display: grid-box都是无效声明 - 如果用了
display: subgrid，它本身不支持gap，且不会继承父网格的gap值
浏览器版本太老，gap被静默忽略
Chrome 66、Firefox 63、Safari 14.1 开始原生支持gap；但 Safari 14.0 及更早、所有 IE 版本、Edge 16–18 完全不识别该属性——它会被解析器直接丢弃，连报错都不会有。
实操建议：
- 在 DevTools 的 Styles 面板里看
gap是否显示为灰色或带删除线；Computed 面板搜不到值或显示not supported，基本可判定是兼容性问题 - iPhone 12 等设备若系统未升级到 iOS 14.5+，Safari 可能仍运行旧版渲染引擎，
gap静默失效 - 别依赖
@supports (gap: 0)做兼容检测：某些安卓 WebView 对该语法解析异常，建议改用@supports (row-gap: 0)更稳妥
写了gap但没看到空隙？检查grid-template-columns是否“挤死”了空间
当grid-template-columns设为固定宽度（比如500px 500px），而容器总宽刚好等于这些列宽之和，gap就没有物理空间可分配——浏览器会优先保证列宽，把gap压缩为 0。
实操建议：
- 用
1fr 1fr或minmax(0, 1fr) 1fr替代固定像素列定义，给gap留出生效余地 - 在响应式断点中测试：某些媒体查询下
grid-template-columns可能退化为单列，此时column-gap自然不可见（但row-gap仍有效） - 别混用
columns（多栏布局）和grid：columns: 2这种写法对 Grid 容器完全无效，还可能干扰渲染
gap和margin同时存在，视觉上“失效”其实是叠加了
很多人说gap“没起作用”，其实是子项自己带了margin，导致间隙变成gap + margin，比预期大一倍。尤其在复用旧组件时，item上常残留margin-bottom或margin-right。
实操建议：
- 统一重置：
.grid > * { margin: 0; }，再靠gap控制所有间距 - 如果必须保留某方向的
margin（如外边距隔离），只在父容器上设margin，别动item - 注意子元素是否用了
display: contents——它会让该元素脱离渲染树，不再作为独立 grid item 参与布局，gap在它周围不会产生间距
真正容易被忽略的是：即使你写了gap: 12px，只要父容器没触发隐式网格轨道生成（比如grid-template-areas没配grid-template-rows），或者 DOM 中混入了文本节点，gap 就可能“存在但不可见”。验证不能只看代码，得进 Computed 面板盯住真实计算值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
