редактировать Очевидно, вы ищете это: редактировать 2 Я понял, как это сделать с некоторыми :nth-child()
правилами
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
grid-gap: 8px;
}
.grid-item {
background-color: red;
}
.grid-item:nth-child(8n+1),
.grid-item:nth-child(8n+3),
.grid-item:nth-child(8n+5),
.grid-item:nth-child(8n+6) {
grid-row: span 2;
background-color: blue;
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>