填充某些网格项目css的所有宽度[重复]

Question

我想通过使用 grid-column 和 grid 来实现这种结构，但在我的情况下，第 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

尝试将您的 css gridColumn 类编辑为：

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