Элементы равной высоты: Flexbox vs. Grid

Элементы равной высоты: Flexbox vs. Grid

От автора: когда-то давно (примерно 7 лет назад) я написала плагин jQuery для вычисления столбцов одинаковой высоты. Это гарантировало, что очень специфический сценарий строки с тремя столбцами будет поддерживать поля содержимого равными по высоте, независимо от длины контента, которое они содержат. Доминирующий метод размещения в то время – float — не справлялся с этой проблемой.

Решение Flexbox

Когда на сцену вышел flexbox, это стало возможным благодаря следующему:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Но затем вы добавляете два дива .column в качестве дочерних и… содержимое столбцов снова выглядит неодинаковым по высоте.

Исправление:

Теперь столбцы будут выглядеть равными по высоте и растягиваться вместе с содержимым .element.

Сетка

В сетке мы сталкиваемся с похожим поведением:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Что лучше?

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

Преимущество сетки заключается в создании элементов равной ширины, если это желательно. Дополнительным преимуществом является то, что вам не нужен автоматический поток, а вместо этого вы можете задать максимальное количество столбцов в «строке». В этом случае компоновка сетки легко обрабатывает математику для распределения столбцов по сравнению с решением flexbox, требующим определения вычисления для ограничения количества столбцов.

Обновить решение .grid для определения максимального числа .column 3 на строку так же просто:

Принимая во внимание, что один (очень простой) вариант для flexbox был бы:

Вам также нужно подумать о том, как быстро обрабатываются эти решения, но это немного выходит за рамки данной статьи.

Автор: Stephanie Eckles

Источник: https://dev.to

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: