CSS Grid, динамические столбцы, с интервалом в 1 столбец до конца строки макета сетки. ⇐ CSS

[Anonymous]

Я пытался создать несколько адаптивный макет сетки CSS с учетом такой настройки:

Код: Выделить всё

        variable number of col
through repeat minmax
------+----------------
aside | item | item | ...
+------+------+----
| item | item | ...
+------+------+----
| variant full row
+------+------+----

Я пробовал такое правило.
Ссылка на codepen: https://codepen.io/gloryw/pen/pvyGQym

Код: Выделить всё

.grid-container {
$gap: 17px;
display: grid;
grid-template-columns: [side] repeat(auto-fit, minmax(min(100%, max(300px, 100%/4 - #{$gap}*3/4)), 1fr));
grid-template-rows: auto;
gap: $gap;

&__item {
display: box;
background: #dd3030;
padding: 2rem;
}

&__item.aside {
background: #30dd30;
grid-column: side / span 1;
grid-row: 1 / -1;
}

&__item.full {
grid-column: 2 / -1;
background: #3030dd;
}
}

на данный момент я обнаружил, что похоже, что

Код: Выделить всё

grid-row: 1/-1

не будет пытаться расширить элемент до максимального количества строк сетки, если я явно не укажу количество строк через столбцы сетки-шаблона
это ожидаемое поведение? Как я могу добиться макета, который я имею в виду, используя только сетку и не имея заданного количества строк, поскольку я хотел бы, чтобы элементы столбцов создавали новую строку, если недостаточно места?

Подробнее здесь: https://stackoverflow.com/questions/798 ... rid-layout