CSS | grid-row-gap 属性

grid-row-gap 属性用于设置网格布局（Grid Layout）中 行 之间的间隙。它定义了每一行之间的空白区域大小。

语法

grid-row-gap: value;

属性值

• value： 指定行间距的长度值，也可以使用百分比。

设置为 0 表示没有行间距。

实例

<div class="grid-container">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 20px;
}

.item1 {
  grid-column: 1 / 2;
  background-color: tomato;
}

.item2 {
  grid-column: 2 / 4;
  background-color: orange;
}

.item3 {
  grid-row: 2 / 3;
  grid-column: 1 / 4;
  background-color: dodgerblue;
}

输出：

备注

• grid-column-gap 用于设置列之间的间距。
• gap 是 row-gap 和 column-gap 的缩写，用于同时设置行和列的间距。