Как это сделать в grid?

Question

[Андрей Кузнецов]

Есть такая верстка https://codepen.io/andrku/pen/PoyEgKQ
Есть 3 ряда по 3 элемента
В первом ряду 3 элемента (плитки) и высота отличается от других элементов .Возможно ли сделать так, что
если блок с текстом в элементе больше чем скажем 20px высота элемента увеличивалась до 50px но важно
что-бы и у соседних элементов в РЯДУ тоже увеличивалась высота.Нужно это сделать
динамически возможно скриптом но как? Нужно хотя-бы направление мысли

Comments

[szQocks]

замени просто height на min-height

[Андрей Кузнецов]

Надо вот так и только в ряду где есть длинный текст,если в ряду нет элементов с длинным текстом то
высота наименьшая или min-height нужно где-то в grid-template-rows прописать? а не в элементе

[imko]

Ну если без скрипта то приходит в голову разве что сделать карточкам display: contents и расставить grid-row правильно для их детей, получишь сетку где ряд цветных квадратов, ряд текстов, снова ряд квадратов и так далее, тогда вопрос элементарный, грид-ребенок в высоту своей ячейки)

[Андрей Кузнецов]

imko, может подскажите как со скриптом сделать?возможно проще будет

[Михаил Р.]

Андрей Кузнецов

Есть 3 ряда по 3 элемента

Количество рядов может изменяться?

[Андрей Кузнецов]

Михаил Р., да рядов может быть гораздо больше и при адаптации в ряду может быть и 2 и 1 элемент

[Sagrana]

Андрей Кузнецов, возможно вам поможет вот этот пример, там как раз про одинаковую высоту блоков по строкам

[imko]

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

[Андрей Кузнецов]

imko, благодарю за Ваши отклики.Нашел более простое решение
grid-template-columns: repeat(auto-fit, minmax(000px, 1fr)); работает идеально

[imko]

Андрей Кузнецов, не очень понял как это работает, можно покажете песочницу?)

[Андрей Кузнецов]

imko, https://codepen.io/andrku/pen/PoyEgKQ

[imko]

Андрей Кузнецов, а понял. Ну в такой ситуации в принципе прокатит, я думал над более универсальным вариантом для любого набора детей карточки чтобы не случалось таких вещей

Answer 1

[Михаил Р.]

да рядов может быть гораздо больше и при адаптации в ряду может быть и 2 и 1 элемент

CSS Grid Layout, параметры сетки, включая высоту строк, определяются на уровне родительского контейнера, а не внутри отдельных строк или ячеек.

Соответственно только js, я ищу блоки с текстом, чекаю их высоту, и при необходимости - увеличиваю минимальную высоту этого блока (150px для наглядности):