应显式设置 row-gap 和 column-gap，避免使用已废弃的 grid-gap 或简写 gap；需配合 align-content 与容器高度确保视觉均匀，并注意子项定位和兼容性降级。
row-gap 和 column-gap 必须分开设置，不能靠 grid-gap 保一致
现代浏览器已废弃 grid-gap，它在部分场景下（比如嵌套 Grid、动态插入子项）会因解析不一致导致行/列间隙一个生效、一个被忽略。你看到“行间距小、列间距大”，大概率是浏览器把 grid-gap: 16px 只当成了 grid-column-gap 处理，而 grid-row-gap 没生效。
可靠写法只能是显式声明两个独立属性：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 16px; /* 控制行与行之间 */
column-gap: 16px; /* 控制列与列之间 */
}
-
row-gap和column-gap值可以不同，但若要相等，必须两边都写，不能省略任一 - 别用
gap: 16px简写——虽然它语义上等价，但在 Safari 16.4 之前版本或某些 React/Vue 的 SSR 渲染中，可能只应用到列方向 - 如果用了
display: inline-grid，row-gap在部分旧 Edge 中会失效，优先改用display: grid
align-content 会干扰“视觉上的行间距均匀感”
row-gap 本身永远是均匀的：设了 16px，那第1–2行、第2–3行之间就一定是 16px。但你感觉“上下空得少、中间空得多”，其实是 align-content 在分配容器剩余空间时，没把首尾也纳入等距计算。
例如默认值 stretch 会让所有行拉满容器高度，row-gap 被挤在中间；flex-start 则让所有行贴顶，底部留一大片空白。
- 想让“顶部–第1行、第1–2行、第2–3行、第3行–底部”全部等于
row-gap值，必须用align-content: space-evenly - 但该行为依赖容器有明确高度（如
height: 500px或min-height），否则退化为flex-start - 不定高容器更稳妥的做法：用
padding-top和padding-bottom模拟首尾间隙，再配align-content: flex-start
子项显式定位或 margin 会覆盖 gap 视觉效果
如果你给某个子项写了 grid-row: 2 / 4 或 margin-bottom: 20px，浏览器可能跳过该轨道的 row-gap 计算，或者让 margin 与 gap 叠加，造成局部间隙突然变大。
- 用 DevTools 的 Layout 面板打开 Grid Overlay，确认 gap 线是否均匀出现在所有轨道之间，而不是只在部分行间出现
- 检查子项是否设置了
margin—— 它和row-gap不叠加，但会改变元素实际占位，造成“看起来不均”的错觉 - 避免混用
grid-template-rows: repeat(3, 1fr)和手动grid-row定位，这种组合在 Firefox 中容易触发 gap 计算异常
IE 或老 Safari 下 gap 完全无效，降级逻辑会破坏一致性
IE 11 及更早版本不支持 gap、row-gap、column-gap 中的任意一个。很多降级方案用 margin-right + :not(:last-child) 模拟列间距，但没同步处理行间距，结果就是列有空隙、行紧贴在一起。
- 真要兼容 IE，必须同时降级行列：列用
.item:not(:last-child) { margin-right: 16px; }，行用.item:not(:nth-last-child(-n+3)) { margin-bottom: 16px; }（假设每行3项） - 更安全的降级是放弃 Grid，改用 Flex +
flex-wrap，并用gap（Flex 中也支持，且 IE 仍不支持，所以仍需 margin 降级） - 现代项目建议直接放弃 IE，用
@supports (row-gap: 1px)包裹 Grid 样式，避免无效声明污染渲染逻辑
真正让行列间距“看起来一致”的，不是调大某个值，而是确认：gap 作用在正确容器上、align-content 与容器高度匹配、子项没用 margin 或显式定位干扰轨道计算、兼容性降级时行列处理逻辑对称。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
