Я приземлился в решении этой проблемы с «фиксированной» позицией на grid-row. У меня есть цикл в Scss, который генерирует его для :nth-child(). 10 дополнительных классов стоят того по сравнению с дополнительной разметкой и css, чтобы решить ее с помощью «строки» начальной загрузки, если вы захотите, и еще больше css для того, что в конечном итоге могло бы стать запасным решением. Для моего варианта использования это будет не более 100 наименований. Если в вашем случае используется более 100 наименований, просто измените время цикла.
$increment: 3;
// change the 10 to your wanted amount
@for $i from 1 through 10 {
.layout-scale__items:nth-child(#{$i*10}) {
grid-row: #{$increment} / span 2;
}
$increment: $increment + 4;
}
Мое полное решение на jsfiddle (из-за внутреннего редактора кода не поддерживает scss)
<div class="layout-scale">
<div class="layout-scale__items">1</div>
<div class="layout-scale__items">2</div>
<div class="layout-scale__items">3</div>
<div class="layout-scale__items">4</div>
<div class="layout-scale__items">5</div>
<div class="layout-scale__items">6</div>
<div class="layout-scale__items">7</div>
<div class="layout-scale__items">8</div>
<div class="layout-scale__items">9</div>
<div class="layout-scale__items">10</div>
<div class="layout-scale__items">11</div>
...
</div>
.layout-scale {
display: grid;
grid-template-columns: repeat(4, 25%);
grid-gap: 1rem;
}
.layout-scale__items {
background-color: aqua;
min-height: 10rem;
}
.layout-scale__items:nth-child(10n + 1) {
background-color: deeppink;
grid-column: span 2;
grid-row: span 2;
}
.layout-scale__items:nth-child(10n + 10) {
background-color: lime;
grid-column: 3 / span 2;
}
$increment: 3;
@for $i from 1 through 10 {
.layout-scale__items:nth-child(#{$i*10}) {
grid-row: #{$increment} / span 2;
}
$increment: $increment + 4;
}