Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Нужен совет по верстве CSS Grid (https://javascript.ru/forum/xhtml-html-css/86176-nuzhen-sovet-po-verstve-css-grid.html)

lad_mat 15.11.2024 17:20

Нужен совет по верстве 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?

Aetae 15.11.2024 18:27

grid-row: 1 / span 100500;

lad_mat 15.11.2024 18:47

Такой вариант тоже рассматривался, но выглядит он, откровенно говоря, как костыль, ведь мы не знаем конечное кол-во элементов в правой колонке, которое может быть 100500+1. Но если спецификацией не предусмотрено простого решения для такой логики поведения, значит придётся использовать то, что есть. Спасибо за ответ.

ksa 15.11.2024 19:20

Цитата:

Сообщение от lad_mat
Но что делать, если точное кол-во элементов .right неизвестно?

Начать можно с того, что просто изменить верстку. ;)
Грид с двумя ячейками. А вот во второй ячейке можно делать все, что угодно. Вот первая и будет растягиваться без всяких проблем.

lad_mat 15.11.2024 19:50

Это один из самых простых вариантов, но в виду отсутствия большого опыта работы с CSS Grid мне было интересно, можно ли это сделать без внесения изменений в разметку и не упускаю ли я что-либо для решения таких задач, лежащее на поверхности.

ksa 16.11.2024 10:23

lad_mat, простые решения работают лучше всего. ;)


Часовой пояс GMT +3, время: 23:07.