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

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

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

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

Решение Flexbox

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

CSS

123.flexbox {  display: flex;}

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

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

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

CSS

12345678.flexbox {  display: flex;   // Ensure content elements fill up the .column  .element {    height: 100%;  }}

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

Сетка

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

CSS

12345.grid {  display: grid;  // Essentially switch the default axis  grid-auto-flow: column;}

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

CSS

READ
Angular в 2020 году и далее
123456789.grid {  display: grid;  grid-auto-flow: column;   // Ensure content elements fill up the .column  .element {    height: 100%;  }}

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

Что лучше?

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

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

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

CSS

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

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

CSS

1234567891011121314$col_gap: 1rem; .flexbox.col-3 {  // Explicitly needs to be defined to wrap   // overflow items to the next virtual row  flex-wrap: wrap;   .column {    // «hack» for no gap property    margin: $col_gap/2;    // define calculation for browser to use on the width    max-width: calc((100% / 3) — #{$col_gap});  }}
READ
Команда YouTube представила новый функционал для издателей видеоконтента

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

Создатель: Stephanie Eckles

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

Источник

Оценить статью
Блог о самом интересном.