css3 网格容器grid-column&row-gap

/* 设置列间隔 */
grid-column-gap: 20px;
/* 设置行间隔 */
grid-row-gap: 20px;

也可以用grid-gap: 20px;表示（行列间隙相等的情况下）

若不相等grid-gap: 20px 20px;前行后列

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
</div>

css

* {
  margin: 0;
  padding: 0;
  /* outline: 1px dashed skyblue; */
}

.container {
  width: 450px;
  margin: 100px auto;
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(3, 150px);
  /* 设置列间隔 */
  grid-column-gap: 20px;
  /* 设置行间隔 */
  grid-row-gap: 20px;
}

.item {
  font-size: 30px;
  text-align: center;
  border: 2px solid skyblue;
}

.item1 {
  background-color: #ef342a;
}

.item2 {
  background-color: #f68f26;
}

.item3 {
  background-color: #4ba946;
}

.item4 {
  background-color: #4adbe6;
}

.item5 {
  background-color: #6046a9;
}

.item6 {
  background-color: #811353;
}

.item7 {
  background-color: #c2d60b;
}

.item8 {
  background-color: #04e99d;
}

.item9 {
  background-color: #cf1b99;
}

代码演示：