Как убрать во второй колонке грида расширение высоты пропорционально первой?
При нажатии на блок в любом ряду, где их двое, второй расширяет свою высоту относительно первого. Как это убрать?
Соурс
Дополнительно:
Описать на своём родном языке, а что должно происходить вместо этого. Дело в том, что вы и нам не рассказали.
Потом перевести всё это на CSS.
Вероятно, от гридов при этом придется избавиться или добавить js для расчета grid-row
"Не должна" - отлично. А должно-то что?
Давайте подробнее варианты:
1. Можно открывать поверх следующих элементов: фикс высота + абсолюты или просто выпадение за счет высоты. Вероятно, не получится без JS, если начальная высота неизвестна.
2. Со сдвигом нижних элементов.
2.1. Только своего столбца: потребуется JS для вычисления количества строк, которые должен занять кликнутый элемент. (Теоретически, можно сразу каждому элементу задать большое количество строк, но тогда умрет gap)
2.2. Вообще сдвиг всех элементов и перераспределение по столбцам. Кликнули по элементу в первом столбце - остальные сдвинулись в обоих столбцах и перераспределились по столбцам.
=> Использовать css columns. JS не нужен, но распределение по столбцам по усмотрению браузера, а оно не всегда выходит красивым.
2.3. Можно открывать кликнутый элемент на всю ширину родителя. Соседа при этом тоже можно/нужно растянуть.
2.4. Ваш вариант.
Можно использовать скрипты типа masonry сами по себе или в сочетании с гридами.
- изначально два столбца (или на js)
- не гриды
- гриды, но ограничение по высоте и заголовков и выпадашек. Выпадашка = заголовок + gap. Ограничение высоты заголовков у вас и так должно быть, иначе и без выпадашек нарушатся желалки.
- флексы колонками + фикс высота контейнера (на js) + js для псевдо, если активный элемент во втором столбце
- js (много разных вариантов для вычислений)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы убрать расширение высоты второй колонки грида пропорционально первой, можно воспользоваться свойством `grid-auto-rows`. Это свойство позволяет задать высоту строк, которые не имеют явно указанной высоты.
Прежде всего, установим значение `grid-auto-rows` для вашего грида. Например, если вы хотите, чтобы высота строк была автоматически определена исходя из содержимого, можно использовать значение `auto`:
.grid-container { display: grid; grid-template-columns: 1fr 1fr; /* две колонки в гриде */ grid-auto-rows: auto; /* высота строк определяется автоматически */ }
Если же вы хотите задать фиксированную высоту строк, можете использовать конкретное значение, например `100px`:
.grid-container { display: grid; grid-template-columns: 1fr 1fr; /* две колонки в гриде */ grid-auto-rows: 100px; /* фиксированная высота строк */ }
Таким образом, установив значение `grid-auto-rows`, вы сможете контролировать высоту строк второй колонки грида, делая ее не пропорциональной высоте первой колонки.