Uses: grid-row-start
and grid-row-end
to
span rows. Columns are similar. Had to use flex on item 6 to justify and align.
.grid-container { display: inline-grid; grid-template-columns: auto auto auto; column-gap: 50px; row-gap: 20px; background-color: indianred; padding: 10px; } .grid-item { background-color: powderblue; text-align: center; padding: 20px; font-size: 30px; } .item1 { grid-column-start:1; grid-column-end:3; } .item6 { grid-row-start:2; grid-column-start:3; grid-row-end:span 2; grid-column-end:span 2; display:flex; align-items: center; justify-content: center; }
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item item6">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
</div>