fill all width for some grid items css

Question

I want to achieve this structure by using grid-column and grid, but in my case columns 5 and 6 don't fill all width, how can fix it?

.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

try edit your css gridColumn class to:

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