Есть такая верстка https://codepen.io/andrku/pen/PoyEgKQ
Есть 3 ряда по 3 элемента
В первом ряду 3 элемента (плитки) и высота отличается от других элементов .Возможно ли сделать так, что
если блок с текстом в элементе больше чем скажем 20px высота элемента увеличивалась до 50px но важно
что-бы и у соседних элементов в РЯДУ тоже увеличивалась высота.Нужно это сделать
динамически возможно скриптом но как? Нужно хотя-бы направление мысли
Надо вот так и только в ряду где есть длинный текст,если в ряду нет элементов с длинным текстом то
высота наименьшая или min-height нужно где-то в grid-template-rows прописать? а не в элементе
Ну если без скрипта то приходит в голову разве что сделать карточкам display: contents и расставить grid-row правильно для их детей, получишь сетку где ряд цветных квадратов, ряд текстов, снова ряд квадратов и так далее, тогда вопрос элементарный, грид-ребенок в высоту своей ячейки)
Андрей Кузнецов, ну просто после загрузки страницы пройтись по всем блокам с текстом, найти максимум из их высот и либо напрямую его каждому указать либо загнать в сцц-переменную для общего родителя а стилями уже из этой переменной их взять. Не очень хороший подход потому что требует дожидаться загрузки и не может реагировать на изменения текста после того как отработает, нужно будет вешать слушатель ресайза и в общем мороки дофига чтобы достичь того же результата как при использовании моего первого варианта с цсс
Андрей Кузнецов, а понял. Ну в такой ситуации в принципе прокатит, я думал над более универсальным вариантом для любого набора детей карточки чтобы не случалось таких вещей
да рядов может быть гораздо больше и при адаптации в ряду может быть и 2 и 1 элемент
CSS Grid Layout, параметры сетки, включая высоту строк, определяются на уровне родительского контейнера, а не внутри отдельных строк или ячеек.
Соответственно только js, я ищу блоки с текстом, чекаю их высоту, и при необходимости - увеличиваю минимальную высоту этого блока (150px для наглядности):
Простой
