<div class="grid">
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
<div class="grid-box"></div>
</div>
.grid-box {
height: 200px;
border-radius: 5px;
border:2px solid black;
}
.grid {
gap: 10px;
display: grid;
grid: auto / repeat(auto-fit,minmax(23%, 1fr));
}
.grid-box:nth-child(5n+1) {
grid-row: span 2;
height: auto;
}
.grid-box:nth-child(-5n+10) {
grid-column: span 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.