需先设置 display: grid；gap 仅对 grid/inline-grid 有效，列间距优先用 column-gap；注意单位、覆盖、margin 干扰及响应式兼容性。
grid-gap 或 gap 设置后列间距没反应？先确认容器是 display: grid
最常见的情况是只写了 gap 却忘了把父容器设为网格布局。CSS Grid 的 gap（或旧名 grid-gap）只对 display: grid 或 display: inline-grid 生效，对 flex、block 甚至 display: subgrid 都无效。
检查方式：打开浏览器开发者工具，选中容器元素，看 computed 样式里 display 是否为 grid；如果不是，补上：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px; /* 或 grid-gap: 12px */
}-
gap是简写，等价于row-gap和column-gap同时设置 - 如果只要列间距（水平间隙），直接用
column-gap: 12px更精准，避免意外影响行距 - 旧版浏览器（如 IE）不支持
gap，需用grid-gap并确保未被覆盖
gap 值被其他样式覆盖或解析为 0
即使设置了 gap，也可能因 CSS 层叠或单位问题失效。比如：
- 后续规则写了
gap: 0或column-gap: 0，把它重置了 - 用了无单位数值（如
gap: 12），CSS 会忽略——必须带单位，如px、rem、%（注意：%在部分浏览器中对gap不生效，建议避免） - 使用了
inherit、unset等关键字但父级没定义，结果 fallback 到normal（等价于0）
调试建议：在开发者工具中点击 gap 属性左侧的复选框，临时禁用再启用，观察是否“闪一下”有效果——如果有，说明被覆盖；如果没有，大概率是 display 或语法问题。
立即学习“前端免费学习笔记（深入）”；
子元素设置了 margin，干扰了视觉上的“列间距”感知
Grid 的 gap 是网格线之间的空白，不与子元素的 margin 叠加。但如果子项自己写了 margin-right 或 margin-left，容易误以为是 gap 没起作用。
- 移除子元素的水平方向
margin，只依赖gap控制间距，语义更清晰、维护性更好 - 若必须混用（例如某些组件库内部已设 margin），注意
gap和margin是并存的，可能造成双倍空白 - 特别留意
justify-content: space-between这类对齐方式，它会在项目间插入空白，和gap效果相似但原理不同，容易混淆
使用 gap 时遇到响应式断点失效或 SSR 渲染异常
在框架（如 Next.js、Nuxt）中服务端渲染时，若 gap 值由 JS 动态注入（例如通过 style={{ gap: spacing }}），可能因初始值为 undefined 或空字符串导致样式丢失；另外，媒体查询中写 gap 要注意兼容性：
- 所有现代浏览器（Chrome 66+、Firefox 61+、Safari 14.1+）都支持
gap，但 Safari 14.0 有 bug，建议升到 14.1+ - 不要在同一个规则里混用
grid-gap和gap，后者会覆盖前者，且旧属性可能被忽略 - 响应式场景下，优先用
column-gap单独控制列距，比gap更可控，例如：@media (max-width: 768px) { .container { column-gap: 8px; } }
真正容易被忽略的是：当 grid 容器内没有显式定义列（如漏写 grid-template-columns），仅靠 auto-fit + minmax() 生成列时，gap 依然生效，但若子元素本身 width 超出预期，可能让间隙“看起来被挤没了”——这时要检查子项是否设置了 width: 100% 或 flex: 1 类似行为，破坏了网格轨道计算。
