Как убрать во второй колонке грида расширение высоты пропорционально первой?

Question

[luxurypluxury]

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

Comments

[Ankhena]

Описать на своём родном языке, а что должно происходить вместо этого. Дело в том, что вы и нам не рассказали.
Потом перевести всё это на CSS.
Вероятно, от гридов при этом придется избавиться или добавить js для расчета grid-row

[luxurypluxury]

Ankhena, высота второго элемента ряда не должна изменяться при открытии первого

[Ankhena]

luxurypluxury, к сожалению, эта информация мало чем отличается от того, что в вопросе.
"Не должна" - отлично. А должно-то что?
Давайте подробнее варианты:
1. Можно открывать поверх следующих элементов: фикс высота + абсолюты или просто выпадение за счет высоты. Вероятно, не получится без JS, если начальная высота неизвестна.
2. Со сдвигом нижних элементов.
2.1. Только своего столбца: потребуется JS для вычисления количества строк, которые должен занять кликнутый элемент. (Теоретически, можно сразу каждому элементу задать большое количество строк, но тогда умрет gap)
2.2. Вообще сдвиг всех элементов и перераспределение по столбцам. Кликнули по элементу в первом столбце - остальные сдвинулись в обоих столбцах и перераспределились по столбцам.
=> Использовать css columns. JS не нужен, но распределение по столбцам по усмотрению браузера, а оно не всегда выходит красивым.
2.3. Можно открывать кликнутый элемент на всю ширину родителя. Соседа при этом тоже можно/нужно растянуть.
2.4. Ваш вариант.

Можно использовать скрипты типа masonry сами по себе или в сочетании с гридами.

[luxurypluxury]

Ankhena, вот как нужно,

[Ankhena]

luxurypluxury,
- изначально два столбца (или на js)
- не гриды
- гриды, но ограничение по высоте и заголовков и выпадашек. Выпадашка = заголовок + gap. Ограничение высоты заголовков у вас и так должно быть, иначе и без выпадашек нарушатся желалки.
- флексы колонками + фикс высота контейнера (на js) + js для псевдо, если активный элемент во втором столбце
- js (много разных вариантов для вычислений)