gap不生效主因是浏览器未解析或布局条件不满足：父容器display非grid/inline-grid、列定义过死（如固定像素）、旧版Safari≤14.1等直接忽略该属性，需用grid-row-gap/grid-column-gap替代并确保弹性列定义。
gap 属性不生效，大概率不是你写错了，而是它压根没被浏览器解析，或者布局条件根本不满足。
父容器 display 值不对，gap 就是废代码
gap 只在 display: grid 或 display: inline-grid 的直接父容器上起作用。写在 display: flex、display: block、display: subgrid 上，浏览器会静默忽略——连警告都没有。
- 用开发者工具选中容器 → 「Computed」面板搜
display，确认值确实是grid，不是拼错成grid-flow或漏写了 - 别把
gap加在子项上，它只属于网格容器本身 -
display: subgrid不支持gap，也不会继承父级的gap值
列/行定义太死，gap 没空间可分配
写了 gap: 16px 却看不到空隙？很可能是 grid-template-columns 或 grid-template-rows 写死了像素值，把剩余空间全占满，浏览器优先保证轨道尺寸，gap 被压缩为 0。
- 错误示例：
grid-template-columns: 500px 500px（总宽刚好 1000px，无余量） - 正确做法：改用弹性单位，如
1fr 1fr或minmax(0, 1fr) 1fr，给gap留出生效所需的物理空间 - 单列布局（
grid-template-columns: 1fr）下column-gap不可见；只有一个 item 且没设grid-auto-rows时，row-gap同样不可见
旧版浏览器直接丢弃 gap，连报错都不给
Safari ≤14.1、iOS ≤14.4、Android WebView ≤75、IE 全系、Edge 16–18 这些环境不认识 gap ——不是“不生效”，是根本没解析，DevTools 里显示为灰色或删除线，Computed 面板搜不到值。
- 必须改用 Level 1 规范属性：
grid-row-gap和grid-column-gap，且两个都得写，只写一个，另一方向间隙为 0 -
autoprefixer默认不处理gap，需显式配置grid: true，且源码里必须写gap才能触发补全 - 别混用：
gap: 12px和grid-row-gap: 12px同时存在，旧引擎可能因解析冲突直接丢弃全部声明
gap 和 margin 混用，视觉效果完全失控
gap 是布局层控制，margin 是项目自身外边距，两者逻辑不同，叠加后容易出意料之外的间距。
- 给某个 grid item 加
margin-bottom: 10px，再设row-gap: 10px→ 实际垂直间隔变成 20px - 用
:first-child或:last-child清除margin，响应式下列数变化时规则立刻失效 - 启用
gap后，建议统一清除子项的margin，避免干扰
最常被忽略的点是：gap 在单轨道（单行/单列）下天然不可见，而旧版 Safari 对 @supports (gap: 0) 的检测也不可靠——真正兜底得靠 @supports (display: grid) and (row-gap: 0) 或 UA 判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
