CSS | 网格间隙属性

在CSS网格布局中，网格间隙属性用来定义每个网格行和列之间的间隔大小。这个属性可以应用于网格容器或网格项。

语法

grid-row-gap: <length> | <percentage> | normal;
grid-column-gap: <length> | <percentage> | normal;
grid-gap: <grid-row-gap> <grid-column-gap>?; /* shorthand */

• grid-row-gap：定义网格行之间的间隔大小。
• grid-column-gap：定义网格列之间的间隔大小。
• grid-gap：同时定义网格行和列之间的间隔大小。如果只指定一个值，则该值应用于网格行和列之间的间隔。

取值

• <length>：固定长度值，如px,em,rem等。
• <percentage>：百分比值，相对于网格容器的宽度或高度计算。
• normal：默认值，表示没有间隔。

示例

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-row-gap: 20px; /* 定义网格行之间的间隔 */
  grid-column-gap: 10px; /* 定义网格列之间的间隔 */
}

.item {
  background-color: #f5f5f5;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

效果如下：

建议

• 设置网格容器的padding属性，可以控制网格容器与网格项之间的空隙大小。
• 通过grid-gap属性的值可缩写，可以更简便地定义网格行和列之间的间隔。
• 网格容器的行高和列宽中，指定的fr单位是相对于网格容器可用空间的比例。