<h1>grid-template-columns: repeat(3, 100px);</h1>
<div class="grid-container container1">
  <div class="grid-item">100px</div>
  <div class="grid-item">100px</div>
  <div class="grid-item">100px</div>
  <div class="grid-item">100px</div>
  <div class="grid-item">100px</div>
  <div class="grid-item">100px</div>
</div>

<h1>grid-template-columns: repeat(2, 1fr 2fr);</h1>
<div class="grid-container container2">
  <div class="grid-item">1fr</div>
  <div class="grid-item">2fr</div>
  <div class="grid-item">1fr</div>
  <div class="grid-item">2fr</div>
  <div class="grid-item">1fr</div>
  <div class="grid-item">2fr</div>
  <div class="grid-item">1fr</div>
  <div class="grid-item">2fr</div>
</div>

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

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

.container1 {
  grid-template-columns: repeat(3, 100px);
}

.container2 {
  grid-template-columns: repeat(2, 1fr 2fr);
}