CSS Grid и Flexbox: сравнение на практике

Дэнни Марков

Оригинал: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
Перевод: Влад Мержевич

Ещё недавно макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.

Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.

Базовый макет

Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда или проверить их в этой демонстрационной версии.

Уменьшенный макет веб-страницы

Уменьшенный макет веб-страницы

Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

  1. Разместить четыре основных раздела макета.
  2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
  3. Выровнять содержимое шапки — навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Испытание 1. Размещение разделов страницы

Решение на Flexbox

Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.

.container {
  display: flex;
  flex-direction: column;
}

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

<header></header>
<div class="main-and-sidebar-wrapper">
  <section class="main"></section>
  <aside class="sidebar"></aside>
</div>
<footer></footer>

Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.

.main-and-sidebar-wrapper {
  display: flex;
  flex-direction: row;
}

Последний шаг — задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.

.main {
  flex: 3;
  margin-right: 60px;
}
.sidebar {
  flex: 1;
}

Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.

Решение на CSS Grid

Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas, как наиболее подходящего для наших целей.

Сперва мы определим четыре grid-area, по одному на каждый раздел страницы:

<header></header>
<!-- Обратите внимание, что в этот раз нет дополнительных элементов -->
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>
header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}

Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.

.container {
  display: grid;
  
  /* Определяем размер и число колонок нашей сетки. 
     Единица fr работает подобно Flexbox:
     колонки делят свободное пространство в строке согласно их значениям.
     У нас будет две колонки — первая в три раза больше второй. */
  grid-template-columns: 3fr 1fr;
  
  /* Связываем сделанные ранее области с местами в сетке.
     Первая строка — шапка.
     Вторая строка делится между основным разделом и боковой панелью.
     Последняя строка — подвал. */
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";

  /* Интервал между ячейками сетки будет 60 пикселей */
  grid-gap: 60px;
}

Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding.

Испытание 2. Делаем страницу адаптивной

Решение на Flexbox

Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin.

@media (max-width: 600px) {
  .main-and-sidebar-wrapper {
    flex-direction: column;
  }
  
  .main {
    margin-right: 0;
    margin-bottom: 60px;
  }
}

Наша страница довольно простая, поэтому в медиа-запросе мало работы, но в более сложном макете придётся много чего переделывать.

Решение на CSS Grid

Поскольку мы уже определили grid-areas, нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.

@media (max-width: 600px) {
  .container {
    /* Выравнивание областей сетки для мобильного макета */
    grid-template-areas: 
      "header header"
      "main main"
      "sidebar sidebar"
      "footer footer";
  }
}

Или можем переопределить весь макет с нуля, если считаем, что это решение чище.

@media (max-width: 600px) {
  .container {
  /* Переделываем сетку в одноколоночный макет */
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "sidebar"
    "footer";
  }
}

Испытание 3. Выравнивание компонентов шапки

Наша шапка включает некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри навигации должны быть выровнены относительно друг друга.

Решение на Flexbox

<header>
  <nav>
    <li><a href="#"><h1>Logo</h1></a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </nav>
  <button>Button</button>
</header>

Мы уже делали похожий макет на Flexbox в одной из наших старых статей — Простейший способ создания адаптивной шапки. Техника довольно простая:

header {
  display: flex;
  justify-content: space-between;
}

Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри <nav> по горизонтали. Проще это сделать с помощью display: inline-block, но поскольку мы собираемся целиком использовать Flexbox, применим решение только для него:

header nav {
  display: flex;
  align-items: baseline;
}

Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.

Решение на CSS Grid

Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.

header{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
header nav {
  justify-self: start;
}
header button {
  justify-self: end;
}

Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:

Ссылки строчные, но они не могут быть выровнены правильно, поскольку не существует варианта baseline, как у align-items. Мы также должны определить ещё одну вложенную сетку.

header nav {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: end; 
}

Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.

Выводы

Если вы прочитали статью целиком (а это отличная работа!), выводы не должны вас удивить. На деле нет лучшей системы — и Flexbox и CSS Grid хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.

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

  • CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
  • Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
  • Используйте CSS Grid для двумерных макетов (строк И колонок).
  • Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
  • Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.
CSS Grid Flexbox

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.