Нужен совет по верстве CSS Grid
Приветствую, эксперты. Нужен совет по стилям 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? |
grid-row: 1 / span 100500; |
Такой вариант тоже рассматривался, но выглядит он, откровенно говоря, как костыль, ведь мы не знаем конечное кол-во элементов в правой колонке, которое может быть 100500+1. Но если спецификацией не предусмотрено простого решения для такой логики поведения, значит придётся использовать то, что есть. Спасибо за ответ.
|
Цитата:
Грид с двумя ячейками. А вот во второй ячейке можно делать все, что угодно. Вот первая и будет растягиваться без всяких проблем. |
Это один из самых простых вариантов, но в виду отсутствия большого опыта работы с CSS Grid мне было интересно, можно ли это сделать без внесения изменений в разметку и не упускаю ли я что-либо для решения таких задач, лежащее на поверхности.
|
lad_mat, простые решения работают лучше всего. ;)
|
Часовой пояс GMT +3, время: 23:07. |