Flexbox vs Grid

В Интернете есть так много замечательных ресурсов CSS. Но что, если вам просто нужен простой макет, и вы хотите его СЕЙЧАС?

В этой статье я описываю 5 наиболее распространенных макетов веб-страниц и способы их создания с помощью Flexbox и Grid.

Как это будет работать

Под каждым макетом есть ссылка на полный код HTML и CSS на CodePen.

Обратите внимание, что я использую SASS для составления определений стилей, поэтому, если вы хотите сделать то же самое на своем локальном компьютере, установите SASS, используя:

npm i sass -g

Базовый шаблон карты

Я использовал эту карточку в качестве основы для макета веб-страницы. Он состоит из трех элементов в вертикальном направлении, поэтому подойдут обычные блоки div. Однако позже мне нужно будет растянуть средний элемент - текстовый абзац.

Здесь и Flexbox, и Grid отлично справляются со своей задачей. Я предпочитаю Flexbox, так как мне проще.

Победитель: Flexbox

CodePen Flexbox, CodePen Grid

Теперь приступим к созданию различных макетов.

# 1 Вертикально и горизонтально центрированная карта

Для Flexbox нам нужен один элемент с горизонтальным центром и другой (дочерний элемент) с вертикальным центром.

Порядок элементов определяется flex-direction. Расположение элемента в доступном пространстве задается параметром align-self для элемента или align-items его родительского элемента.

С сеткой нам нужно три столбца и три строки. Затем помещаем карту в среднюю ячейку.

Горизонтальное центрирование очень просто. Мы определяем три столбца и их размеры с помощью grid-template-columns: auto 33% auto, поскольку ширина карточки должна составлять 1/3 видимой области.

Проблема в том, что мы не знаем вертикальных размеров. Мы хотим, чтобы верхний и нижний ряды занимали оставшееся пространство, что невозможно с сеткой. Карточка находится по центру, но ее высота зависит от высоты окна.

Однако мы можем решить эту проблему с помощью дополнительного элемента обертывания вокруг карты и центрировать ее с помощью поля.

Победитель: Flexbox

CodePen Flexbox, CodePen Grid

# 2 Две карты по вертикали и горизонтали по центру

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

С Flexbox нам нужно обернуть обе карты другим элементом и использовать его для одновременного центрирования обеих карт.

Мы не можем использовать здесь align-items, так как в данном случае это относится к оси Y. Нам нужно определить, как должно быть распределено оставшееся пространство по оси X, с помощью justify-content: center. Это гарантирует, что обе карты центрированы по горизонтали.

Если мы опустим проблему переменной высоты Grid, мы сможем достичь того же результата даже без каких-либо дополнительных элементов оболочки. На этот раз мы определяем сетку с пятью столбцами с помощью grid-template-columns: auto 33% 50px 33% auto. Остальное остается таким же, как в предыдущем примере.

Победитель: Flexbox

CodePen Flexbox, CodePen Grid

# 3 Несколько карточек одинаковой ширины и высоты

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

Это можно сделать в Flexbox с помощью flex-wrap: wrap. Элементы будут перенесены на следующую строку, если их ширина превышает оставшееся пространство каждой строки. Однако такая же высота сохраняется только в пределах одной строки, если вы не определите ее явно.

Сетка показывает здесь свою истинную силу. Этот макет может быть создан с помощью grid-auto-rows: 1fr, который обеспечивает одинаковую высоту для всех строк.

Победитель: Grid

CodePen Flexbox, CodePen Grid

# 4 Чередование текста и изображений по вертикали и горизонтали по центру

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

Это кусок пирога для Flexbox. Каждая строка представляет собой элемент статьи, разделенный на два контейнера-обертки, .img и .content. Они необходимы для равномерного распределения по размеру (гибкость: 50%).

Вертикальное центрирование внутреннего содержимого определяется параметром align-items: center.

Чередование достигается изменением направления Flexbox на противоположное с помощью flex-direction: row-reverse для каждого нечетного товара.

Grid прекрасно справляется и с этим вариантом использования. Нам не нужно определять одну гигантскую сетку, а скорее по одной для каждой статьи.

Он определяет столбцы одинаковой ширины, которые центрируются по вертикали с помощью align-items: center.

Чередование определяется на уровне ячейки переключенными значениями для столбца сетки.

Победитель: ничья

CodePen Flexbox, CodePen Grid

# 5 Горизонтальный заголовок с меню

Чтобы добиться такого дизайна с помощью Flexbox, обе стороны заголовка должны быть представлены одним элементом.

Логотип и название компании образуют один якорь слева, а меню - это один элемент навигации справа. Flexbox позиционирует их с помощью justify-content: space-between.

Для Grid нам нужны два столбца - один для логотипа, а другой для меню. Меню - это еще одна сетка, которая равномерно распределяет размер столбцов с помощью grid-template-columns: repeat (4, minmax (0, 1fr)).

Проблема здесь в том, что если мы хотим добавить еще один элемент в меню, нам также необходимо настроить CSS.

Победитель: Flexbox

CodePen Flexbox, CodePen Grid

И победителем становится...

Итоговый счет 5: 2 в пользу Flexbox, но это не означает, что он становится окончательным победителем CSS. Бывают ситуации, когда вам нужно использовать один или другой, иногда даже оба вместе, чтобы достичь того, что вам нужно.

Если вам нужно гибкое и условное позиционирование, используйте Flexbox. Если вы хотите создать списки или аналогичные структуры, которые требуют элементов одинакового размера или имеют табличную форму, используйте сетку.

Как фронтенд-разработчик, вам не сойдет с рук, не зная и того, и другого.