display：grid。如何将块拉伸到全宽

Question

我正在研究网格。我希望第三个块拉伸到整个宽度。如果可能的话，不添加其他类。

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 2;
}

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

最终，我想获得following。

Answer 1

尝试一下：

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third" style="grid-column: 1 / 3;"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>