Ответ 1
Короткий ответ
Если цель состоит в том, чтобы создать сетку с равными высотными рядами, где самая высокая ячейка в сетке устанавливает высоту для всех рядов, здесь быстрое и простое решение:
- Установите контейнер на
grid-auto-rows: 1fr
Как это работает
Grid Layout предоставляет блок для определения гибкой длины в сеточном контейнере. Это устройство fr
. Он предназначен для распределения свободного пространства в контейнере и в некоторой степени аналогичен свойству flex-grow
во flexbox.
Если вы установите все строки в сеточном контейнере на 1fr
, скажем так:
grid-auto-rows: 1fr;
... тогда все строки будут равны по высоте.
В действительности это не имеет смысла, поскольку fr
должен распределять свободное пространство. И если несколько строк имеют содержимое с разной высотой, то при распределении пространства некоторые строки будут пропорционально меньше и выше.
За исключением, глубоко в спецификации сетки находится этот маленький самородок:
7.2.3. Flexible Lengths: the
fr
unit...
Когда доступное пространство бесконечно (что происходит, когда сетка ширина или высота контейнеров неопределенна), дорожки сетки гибкого размера (
fr
) в соответствии с их содержанием, сохраняя при этом их соответствующие пропорции.Используемый размер каждой дорожки сетки гибкого размера вычисляется путем определения размер
max-content
каждой дорожки сетки гибкого размера и деление этого размер по соответствующему коэффициенту изгиба для определения гипотетического1fr
размер.Максимум из них используется в качестве разрешенной длины
1fr
( изгиб), который затем умножается на каждую сетку фактор, чтобы определить его окончательный размер.
Поэтому, если я правильно читаю, при работе с сеткой динамического размера (например, высота не определена), дорожки сетки (в данном случае строки) масштабируются по своему содержанию.
Высота каждой строки определяется самым высоким (max-content
) элементом сетки.
Максимальная высота этих строк становится длиной 1fr
.
Вот как 1fr
создает строки одинаковой высоты в сеточном контейнере.
Почему flexbox не вариант
Как отмечено в вопросе, строки с одинаковой высотой невозможны с flexbox.
Элементы Flex могут иметь одинаковую высоту в одном ряду, но не в нескольких рядах.
Это поведение определено в спецификации flexbox:
В многострочном гибком контейнере поперечный размер каждой строки - это минимальный размер, необходимый для размещения гибких элементов на линии.
Другими словами, если в гибком контейнере на основе строк имеется несколько строк, высота каждой строки ("поперечный размер") - это минимальная высота, необходимая для размещения гибких элементов в строке.