Допустим есть сетка, в которой явным образом не указан алгоритм размещения блоков и при скроле подгружаются новые блоки. Как задать им алгоритм размещения? Пример сетки:
1 ответ
Можно сделать вот так
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 150px;
grid-gap: 15px;
}
.grid-item {
background-color: purple;
}
.grid-item:nth-child(6n + 1) {
background-color: green;
grid-column-end: span 2;
grid-row-end: span 2;
}
.grid-item:nth-child(6n + 2), .grid-item:nth-child(6n + 3) {
background-color: red;
grid-column-end: span 2;
}
.grid-item:nth-child(6n + 4) {
background-color: yellow;
grid-column-end: span 2;
}
<div class="grid-container">
<div class="grid-item">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">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>