Я так понимаю, что этого невозможно достичь с помощью Flexbox, поскольку каждая строка может иметь только минимальную высоту, необходимую для размещения ее элементов, но можно ли этого достичь с помощью новой CSS Grid?
Для ясности, я хочу, чтобы все элементы сетки были одинаковой высоты во всех строках, а не только в каждой строке. По сути, самая высокая «ячейка» должна определять высоту всех ячеек, а не только ячеек в своем ряду.
Ответы:
Если цель состоит в том, чтобы создать сетку с строками одинаковой высоты, где самая высокая ячейка в сетке устанавливает высоту для всех строк, вот быстрое и простое решение:
grid-auto-rows: 1frGrid Layout предоставляет модуль для установки гибких длин в контейнере сетки. Это frединица. Он предназначен для распределения свободного места в контейнере и в некоторой степени аналогичен flex-growсвойству в flexbox.
Если вы установите для всех строк в контейнере сетки значение 1fr, скажем так:
grid-auto-rows: 1fr;
... тогда все строки будут равной высоты.
На самом деле это не имеет смысла сразу, потому что frдолжно распределять свободное пространство. А если в нескольких строках есть содержимое с разной высотой, то при распределении пространства некоторые строки будут пропорционально меньше и выше.
За исключением того , что глубоко в спецификации сетки похоронен этот маленький самородок:
7.2.3. Гибкая длина:
frединица...
Когда доступное пространство бесконечно (что происходит, когда ширина или высота контейнера сетки не определены),
frдорожки сетки flex-sizes ( ) изменяются в соответствии с их содержимым, сохраняя при этом соответствующие пропорции.Используемый размер каждой дорожки сетки гибкого размера вычисляется путем определения
max-contentразмера каждой дорожки сетки гибкого размера и деления этого размера на соответствующий коэффициент гибкости для определения «гипотетического1frразмера».Максимальное из них используется в качестве разрешенной
1frдлины (доли гибкости), которая затем умножается на коэффициент гибкости каждой дорожки сетки для определения ее окончательного размера.
Итак, если я правильно это читаю, при работе с сеткой динамического размера (например, высота не определена) дорожки сетки (в данном случае строки) имеют размер в соответствии с их содержимым.
Высота каждой строки определяется самым высоким ( max-content) элементом сетки.
Максимальная высота этих строк становится длиной 1fr.
Вот как 1frсоздаются строки одинаковой высоты в контейнере сетки.
Как отмечено в вопросе, строки с одинаковой высотой невозможны с помощью flexbox.
Элементы Flex могут иметь одинаковую высоту в одной строке, но не в нескольких строках.
Это поведение определено в спецификации flexbox:
В многострочном гибком контейнере поперечный размер каждой строки - это минимальный размер, необходимый для размещения гибких элементов в строке.
Другими словами, когда есть несколько строк в гибком контейнере на основе строк, высота каждой строки («поперечный размер») является минимальной высотой, необходимой для размещения гибких элементов в строке.
Короткий ответ заключается в том, что настройка grid-auto-rows: 1fr;контейнера сетки решает вопрос.
grid-auto-rowдля этой строки - 2, означает ли это, что размер 1fr для первой строки равен 50 пикселей?