在CSS Grid布局中，容器默认会把所有子项按行和列排成二维网络。当我们发现渲染出来的页面行与行之间空隙过大时，问题往往出在间距属性的设置方式上。Grid布局有一套独立的间距控制机制，它并不是简单地把所有空白都当作外边距来处理，而是通过明确的轨道间隙属性来分隔网格轨道。
Grid中的轨道指的是行轨道和列轨道，也就是子元素排列所依赖的水平与垂直通道。行轨道之间的空白由行间隙属性控制，列轨道之间的空白由列间隙属性控制。这两个概念在规范里是完全独立的，因此我们可以只改其中一项而不动另一项。理解这一点，就能明白为什么行距异常时不需要去动列相关的设置。
很多开发者在写样式时图省事，直接用gap缩写属性一次性设置行列间距，例如gap: 40px。这等价于同时把row-gap和column-gap都设成了40px。当设计稿要求列距宽、行距窄，或者反过来时，这种写法就会让某一方向显得过于稀疏。我们要做的，是拆开缩写，单独声明row-gap。
row-gap属性的基本用法与浏览器兼容
row-gap是CSS Box Alignment Module中定义的属性，专门用于设置网格行轨道之间的间距。它的取值规则和margin类似，可以使用固定像素、百分比、em等长度单位。在一个典型的卡片列表容器上，如果我们希望行距只有12像素，而列距保持24像素，就可以这样写：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 24px;
row-gap: 12px;
}
上面的代码明确把行距压到了12像素，列距仍是24像素，视觉上就不会出现行方向空白过多的问题。需要注意的是，在早期版本的浏览器草案中，这个属性曾叫做grid-row-gap。那时候必须写grid-row-gap: 12px才有效，而现在的现代浏览器已经统一支持不带grid-前缀的row-gap。如果项目仍需兼容很老的浏览器，可以用带前缀的写法做降级，但新项目直接用row-gap即可。
使用row-gap还有一个好处，就是它不会影响网格子项自身的盒模型。子项的宽度依旧由grid-template-columns决定，高度由内容或grid-template-rows决定，行间隙纯粹是轨道之间的额外空间。这意味着调整row-gap不会引发子项被挤压或溢出，布局稳定性比用margin-bottom强行撑开要高得多。
为什么行距会看起来比设置值更大
有时候我们明明写了row-gap: 8px，肉眼看行距却像有三十像素。这种情况通常不是row-gap失效，而是网格行轨道本身被内容撑出了额外高度。Grid的每一行高度默认是auto，也就是跟随该行最高子项变化。如果某个卡片内部有图片下方留白、或者行内元素基线对齐产生了隐形空间，整行就会被拉高，行与行之间自然显得空。
<div class="grid-container"> <div class="card"><img src="a.jpg" alt=""></div> <div class="card"><img src="b.jpg" alt=""></div> </div>
像上面这段HTML，如果img标签在卡片里没有设成display: block，图片下方会因为行内元素的基线规则留下几像素空白。多个卡片叠在不同行，就会误以为row-gap变大。解决办法是给图片加display: block，或者统一用vertical-align: top，把行内幽灵空白消灭掉，再配合row-gap才能得到真实行距。
另外，若容器设了align-content: space-between之类的对齐方式，多余空间会被分配到行与行之间，这也会让实际间隔大于row-gap。在固定行数的网格里，应当使用align-content: start或stretch，避免额外分配垂直空间，这样才能让row-gap成为唯一的行距来源。
结合fr与minmax精准控制行高和行距
当我们需要响应式排版时，可以用fr单位配合minmax来约束行轨道高度，再辅以row-gap微调。比如做一个自适应图库，希望每行最少120像素，最多随屏幕拉伸，行距恒为10像素：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-auto-rows: minmax(120px, auto);
row-gap: 10px;
column-gap: 10px;
}
这里grid-auto-rows定义了隐式行轨道的最小高度，row-gap只负责轨道间隙。因为行高被minmax限制，内容再少也不会塌成一条线，内容再多也只会撑开当前行而不波及其他行。这种写法在后台数据列表、商品橱窗里非常实用，既能保证整齐，又不会因行距默认过大显得稀疏。
如果页面是从旧版浮动布局迁移过来的，还可以用row-gap逐步替换原本的margin-bottom。做法是先清空子项margin，再在容器统一设row-gap。这样HTML结构不用动，仅改CSS就能消除行距不匀的毛病。实测在千行级别的页面里，用row-gap替代margin方案，样式冲突率下降明显，后续维护也更直观。
最后提醒，row-gap不仅可以用于Grid，也能用于Flexbox等支持盒对齐的布局，但本文聚焦Grid场景。只要记住行距归row-gap、列距归column-gap，遇到网格行空白异常就先查这两项，而不是盲目调子项margin或改模板列数，问题大多能快速解决。