在CSS网格布局的实际开发中，经常会出现网格行间距不符合设计预期的情况，比如不同行的间距大小不一致，或者间距设置后影响了整体布局的对齐效果。这时候不需要逐个给网格项添加外边距调整，使用row-gap属性就能统一控制网格行之间的间距。
什么是row-gap属性
row-gap是CSS网格布局中专门用于设置网格行之间间距的属性，它属于网格容器的属性，只需要给设置了display: grid的容器添加该属性，就能统一调整所有网格行之间的间隔，不会影响网格列之间的间距，也不会干扰网格项本身的外边距设置。
row-gap的基本用法
row-gap的语法非常简单，支持长度单位，比如px、rem、%等，取值为0的时候表示行之间没有间距。下面是一个基础的使用示例：
/* 网格容器样式 */
.grid-container {
display: grid;
/* 设置3列，每列等宽 */
grid-template-columns: repeat(3, 1fr);
/* 统一设置行间距为20px */
row-gap: 20px;
/* 可选：设置列间距，和row-gap互不影响 */
column-gap: 15px;
}
/* 网格项基础样式 */
.grid-item {
padding: 16px;
background-color: #f0f0f0;
text-align: center;
}
对应的HTML结构如下：
<div class="grid-container">
<div class="grid-item">网格项1</div>
<div class="grid-item">网格项2</div>
<div class="grid-item">网格项3</div>
<div class="grid-item">网格项4</div>
<div class="grid-item">网格项5</div>
<div class="grid-item">网格项6</div>
</div>
row-gap和旧版本gap的区别
早期CSS规范中，grid-gap是同时设置行间距和列间距的简写属性，row-gap和column-gap分别是单独设置行和列的间距。现在grid-gap已经被gap替代，gap是row-gap和column-gap的简写属性，但是row-gap的兼容性比gap更好，如果需要兼容老版本浏览器，优先使用row-gap单独设置行间距。
下面是gap和row-gap的对应关系：
| 属性 | 作用 | 取值示例 |
|---|---|---|
| row-gap | 仅设置网格行之间的间距 | row-gap: 20px; |
| column-gap | 仅设置网格列之间的间距 | column-gap: 15px; |
| gap | 同时设置行间距和列间距，第一个值是行间距，第二个值是列间距 | gap: 20px 15px; |
使用row-gap的注意事项
- row-gap只能应用在设置了
display: grid或者display: inline-grid的容器上，普通容器使用该属性不会生效。 - row-gap的取值如果是百分比，是相对于网格容器的宽度计算的，而不是高度。
- 如果同时给网格项设置了下外边距，row-gap的间距会和margin-bottom叠加，需要避免重复设置间距导致行间距过大。
- 目前所有现代浏览器都支持row-gap属性，不需要添加浏览器前缀。
实际场景示例
假设需要实现一个商品列表，每行3个商品，行间距要统一为24px，列间距为16px，使用row-gap的实现代码如下：
.product-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 统一行间距24px */
row-gap: 24px;
column-gap: 16px;
padding: 20px;
}
.product-item {
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.product-item img {
width: 100%;
height: 160px;
object-fit: cover;
margin-bottom: 12px;
}
这样设置后，所有商品行的间距都会统一为24px，不管商品内容高度是否一致，行与行之间的间隔都会保持固定，不会出现间距忽大忽小的问题。
CSS_gridrow_gapgrid_layout行间距设置修改时间：2026-07-08 04:00:23