Современные решения старых CSS-задач (2 часть): Элементы одинаковой высоты: Flexbox vs Grid

Приветствую. Представляю вашему вниманию перевод статьи «Equal Height Elements: Flexbox vs. Grid», опубликованной 9 апреля 2020 года автором Stephanie Eckles

Это вторая статья из серии, посвящённой ознакомлению с современными способами решения CSS-проблем, с которыми я сталкивалась на протяжении более 13 лет в роли фронтенд-разработчика.

Однажды (приблизительно 7 лет назад) я написала JQuery-плагин, который работал с тремя колонками, расположенными на одной строке. А именно, рассчитывал и задавал одинаковую высоту для элементов, независимо от количества содержимого в каждом из них. Метод вёрстки на float, который был тогда основным, не мог справиться с этой проблемой.

Решение с помощью Flexbox

С появлением Flexbox достижение такого поведения стало возможно благодаря добавлению всего одного свойства:

.flexbox {   display: flex; }

Удивительно! В этом случае прямые потомки по умолчанию выстраиваются в строку и имеют одинаковую высоту.

Но если содержимое будет храниться в дополнительном элементе, вложенном в .column, высота колонок с разным количеством контента снова будет отличаться.

Чтобы исправить это, вложенному элементу следует задать высоту 100%

.flexbox {   display: flex; }  /* Гарантия, что вложенные элементы с содержимым будут заполнять высоту колонок */ .element {     height: 100%; }

Колонки снова станут равной высоты и будут расти вместе с содержимым вложенного элемента .element.

Решение с помощью Grid

Используя Grid, мы сталкиваемся с похожим поведением:

.grid {   display: grid;   /* Смена оси автоматического размещения элементов */   grid-auto-flow: column; }

Подобно Flexbox, прямые потомки будут иметь одинаковую высоту, но их дети нуждаются в явном определении высоты, как и в способе с использованием Flexbox:

.flexbox {   display: grid;   grid-auto-flow: column; }  /* Гарантия, что элементы с содержимым будут заполнять элементы колонок */ .element {     height: 100%; }

Ниже представлена Codepen-демонстрация обоих решений для разного количества колонок в строке:

Какой способ лучше?

Для решения проблемы с равной высотой элементов, преимущество Flexbox в том, что ось по умолчанию позволяет сразу выстроить колонки рядом друг с другом, тогда как в Grid её нужно менять явно. Кроме того, элементы также не будут иметь одинаковую ширину (что может быть преимуществом для определённых типов содержимого, например, навигационных ссылок).

Преимуществом Grid в том, что столбцам можно задать равную ширину, если в этом есть необходимость. Также, в случае необходимости, можно указать желаемое максимальное количество столбцов на "строку". В этом случае Grid-макет с легкостью справляется с расчётами для автоматического распределения пространства между столбцами, в то время как Flexbox требует ручного задания расчётов для ограничения количества колонок.

Обновим наше решение с использованием Grid для 3 элементов .column на строке:

&.col-3 {   grid-gap: $col_gap;   grid-template-columns: repeat(3, 1fr); }

В то время, как для Flexbox самый простой вариант был бы таким:

$col_gap: 1rem;  .flexbox.col-3 {   /* Требует явного разрешения переноса не помещающихся элементов на новую строку */   flex-wrap: wrap;    .column {     /* Альтернатива свойству "gap" */     margin: $col_gap/2;     /* Расчёты ширины колонок     max-width: calc((100% / 3) - #{$col_gap});   } }

Также, для каждого способа необходимо переопределять параметры с учётом адаптивности, но это выходит за рамки данной статьи