У меня есть хтмл код сетки, который не работает должным образом. Мне нужен вот такой результат:
Но в итоге, код дает не тот результат, который нужен. Пожалуйста, подскажите, где я ошибаюсь. Спасибо.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-flow:dense;
gap: 30px;
}
.item {
background: grey;
}
.item:nth-child(6n + 1), .item:nth-child(6n + 6) {
grid-row:span 2;
grid-column:span 2;
}
.item:nth-child(6n + 5) {
grid-column:1;
}
.item:nth-child(4n) {
grid-column: span 2;
}
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
</div>