为某些网格项目css填充所有宽度

Question

我想通过使用网格列和网格来实现此结构，但是在我的情况下，第5列和第6列不能填满所有宽度，如何解决？

.parent {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 16px;
}

.child {
  height: 50px;
  background: rgb(82, 185, 15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gridColumn {
  grid-column: 1;
}

<div class="parent">
 <div class="child">1</div>
 <div class="child">2</div>
 <div class="child">3</div>
 <div class="child">4</div>
 <div class="child gridColumn" >
  5
 </div>
 <div class="child gridColumn">
 6
 </div>
 <div class="child gridColumn">
 7
 </div>
</div>

Answer 1

尝试将CS​​S gridColumn类编辑为：

.gridColumn {
  grid-column: 1 / span 2;
}

Answer 2

尝试分离父类和gridColumn类。

尝试一下：

.parent {
  display: grid;
  grid-template-columns: auto auto;
  grid-column-gap: 16px;
}

.child {
  height: 50px;
  background: rgb(82, 185, 15);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.gridColumn {
  grid-column: 1;
  width: 100%;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div>
<div class="child gridColumn">
  5
</div>
<div class="child gridColumn">
  6
</div>
<div class="child gridColumn">
  7
</div>