使用 row-gap 可统一CSS网格行间距，需设置 display: grid 并在容器上应用 row-gap（如 row-gap: 20px），实现整齐垂直间隙，避免依赖 margin 或 padding 导致的混乱，推荐配合 gap 简写以提升兼容性。
在使用CSS网格布局时，如果发现网格行与行之间的间距不一致或看起来不理想，问题很可能出在间距的设置方式上。默认情况下，网格容器不会自动为行之间添加间距，需要手动控制。
使用 row-gap 统一行间距
row-gap 是CSS Grid中专门用于设置网格行之间间距的属性，它能有效解决行距混乱的问题，让布局更整齐美观。
通过为网格容器设置 row-gap，你可以统一所有行之间的垂直间距，无需依赖 margin 或 padding 来调整，避免计算错误和结构混乱。
基本语法：row-gap: 10px; —— 行与行之间留出10像素的间距
如何正确应用 row-gap
- 确保父元素已启用 grid 布局（即 display: grid）
- 在容器上直接设置 row-gap，浏览器会自动在每行之间插入等距空隙
- 可搭配 column-gap 使用，分别控制行距和列距
- 支持 rem、em、%、px 等单位，推荐使用 px 或 rem 保证一致性
.container {<br>
display: grid;<br>
grid-template-rows: auto auto auto;<br>
row-gap: 20px;<br>
}
这样每一行内容之间都会保持20px的间距，不会再出现上下贴得太近或忽大忽小的情况。
兼容性与注意事项
现代浏览器普遍支持 row-gap，但在一些旧版本浏览器（如 IE）中可能无效。若需兼容老环境，可考虑使用 gap 简写属性，或退回到 margin 控制。
注意：row-gap 不会影响网格项内部的 padding，只作用于行轨道之间的间隙。
基本上就这些，用好 row-gap 能大幅提升网格布局的整洁度和维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
