<h1>grid-gap: 10px;</h1>
<div class="grid-container container1">
  <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>

<h1>grid-gap: 10px 20px;</h1>
<div class="grid-container container2">
  <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>

.grid-container {
  display: grid;
  margin-bottom: 10px;
  background-color: #ccc;
}

.grid-item {
  padding: 10px;
  background-color: yellow;
}

.container1 {
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.container2 {
  grid-gap: 10px 20px;
  grid-template-columns: 1fr 1fr;
}