应改用 row-gap 和 column-gap（或 gap）替代已废弃的 grid-gap，确保写在 display: grid 的容器上，避免显式定位、margin 干扰及浏览器旧语法兼容问题。
grid-gap 在多行网格中失效的常见原因
直接写 grid-gap 却发现行间距忽大忽小，大概率不是 CSS 写错了，而是你用了过时的语法或容器存在隐式行为干扰。现代标准中 grid-gap 已被废弃，必须改用 row-gap 和 column-gap —— 浏览器对旧属性的支持不一致，尤其在嵌套网格或动态内容下容易出现计算偏差。
为什么 grid-gap 有时只影响列、有时只影响行
旧版 grid-gap 是简写属性，等价于 grid-row-gap + grid-column-gap，但它依赖父容器的 display: grid 完全生效，且不兼容 display: inline-grid 的某些实现。更关键的是：如果子项设置了 grid-row 或 grid-column 显式定位，部分浏览器会跳过 gap 计算，导致某几行“贴在一起”。
- 检查是否混用了
grid-template-rows: repeat(3, 1fr)和手动grid-row: 2的项 - 确认没有给子元素设置
margin，它会和 gap 叠加造成视觉错觉 - 用 DevTools 的 Layout 面板看实际生成的轨道线（Grid Overlay），gap 应该均匀出现在轨道之间，而非单元格边缘
统一多行网格间距的可靠写法
放弃 grid-gap，改用两个独立属性，并确保它们作用在正确的容器上——只能写在网格容器（即 display: grid 的父元素）上，子项上写无效。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 16px;
column-gap: 16px;
}
-
row-gap控制行与行之间的空白（即水平方向的间隙） -
column-gap控制列与列之间的空白（即垂直方向的间隙） - 两者可设不同值，如
row-gap: 8px; column-gap: 24px; - 若需完全相等，也可简写为
gap: 16px;（注意：这是新标准，IE 不支持，但 Chrome/Firefox/Edge 100% 可靠）
动态内容或 JS 插入后 gap 错乱怎么办
用 JS 动态添加子元素时，如果新节点没触发网格重排（例如插入后未修改 grid-template-rows），部分浏览器可能沿用旧的 gap 计算逻辑，表现为最后一行突然变窄或错位。
立即学习“前端免费学习笔记（深入）”；
- 插入后强制触发重排：
container.style.transform = 'scale(1)'（最小代价） - 避免在插入前设置
grid-auto-rows为固定值，改用minmax(0, 1fr)更健壮 - 如果用 React/Vue，确保 key 正确，避免复用 DOM 节点导致样式残留
