Приветствую, эксперты. Нужен совет по стилям CSS Grid:
Имеется:
Grid-контейнер с 2 колонками и 2 рядами: .container
В левой колонке есть 1 элемент: .left
В правой колонке есть 2 элемента: .right, .right
Получается сетка в виде квадрата 2x2.
Нужно, чтобы элемент .left из левой колонки растягивался по высоте до высоты контейнера. То есть должен быть равен высоте всех элементов из правой колонки: .right + .right.
Сделать это, зная заранее кол-во элементов .right в правой колонке, достаточно просто:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="right">right</div>
</div>
.container {
display: grid;
}
.left {
grid-column: 1;
grid-row: 1 / 3;
}
.right {
grid-column: 2;
}
Но что делать, если точное кол-во элементов .right неизвестно?
Это возможно сделать только средствами grid без изменения разметки и JS?