Строки равных высот в макете сетки CSS

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

Чтобы быть ясным, я хочу равную высоту для всех элементов сетки во всех строках, а не только для каждой строки. В принципе, самая высокая "ячейка" должна определять высоту всех ячеек, а не только ячейки в ее ряду.

ОТВЕТЫ

Ответ 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:

6. Flex Lines

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

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

Ответ 2

Короткий ответ: установка grid-auto-rows: 1fr; в контейнере сетки решает то, что было задано.

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

Ответ 3

Вы можете использовать проценты для grid-template-rows, например, так

grid-template-rows: 50% 50%;

Ответ 4

<div class="flexbox">
  <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
</div>

.flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
.flexbox .col {
  flex: 1;
}

.flexbox .col:nth-child(1) {
  background: #ccc;
  order: 1;
}
.flexbox .col:nth-child(2) {
  background: #eee;
  order: 0;
}
.flexbox .col:nth-child(3) {
  background: #eee;
  order: 2;
}

Свойство align-items можно настроить на растяжение, чтобы убедиться, что они равны по высоте, но по умолчанию! Поэтому нам не нужно устанавливать его вообще.

для получения дополнительной информации: https://css-tricks.com/fluid-width-equal-height-columns/