Строки одинаковой высоты в CSS Grid Layout

Я так понимаю, что этого невозможно достичь с помощью Flexbox, поскольку каждая строка может иметь только минимальную высоту, необходимую для размещения ее элементов, но можно ли этого достичь с помощью новой CSS Grid?

Для ясности, я хочу, чтобы все элементы сетки были одинаковой высоты во всех строках, а не только в каждой строке. По сути, самая высокая «ячейка» должна определять высоту всех ячеек, а не только ячеек в своем ряду.

Короткий ответ

Если цель состоит в том, чтобы создать сетку с строками одинаковой высоты, где самая высокая ячейка в сетке устанавливает высоту для всех строк, вот быстрое и простое решение:

• Установите контейнер на grid-auto-rows: 1fr

Как это работает

Grid 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 не подходит

Как отмечено в вопросе, строки с одинаковой высотой невозможны с помощью flexbox.

Элементы Flex могут иметь одинаковую высоту в одной строке, но не в нескольких строках.

Это поведение определено в спецификации flexbox:

6. Гибкие линии

В многострочном гибком контейнере поперечный размер каждой строки - это минимальный размер, необходимый для размещения гибких элементов в строке.

Другими словами, когда есть несколько строк в гибком контейнере на основе строк, высота каждой строки («поперечный размер») является минимальной высотой, необходимой для размещения гибких элементов в строке.

Короткий ответ заключается в том, что настройка grid-auto-rows: 1fr;контейнера сетки решает вопрос.

https://codepen.io/Hlsg/pen/EXKJba