CSS-Grid VS Flexbox
Статья раскроет, как и где лучше использовать тот или иной инструмент, так как CSS Grid и Flexbox будут сравнены на практике.
Не так давно разметка для всех страниц HTML выполнялась с помощью таблиц, свойства float и других свойств CSS, которые не очень хорошо подходили для моделирования сложных веб-страниц.
Затем появился flexbox – режим разметки, который был специально разработан для создания надежных адаптивных страниц. Flexbox упростил выравнивание элементов и их содержимого, и в настоящее время является предпочтительной системой CSS большинства веб-разработчиков.
Теперь у нас появился новый претендент на трофей с лучшей системой для сборки-html-макетов (название трофея находится в процессе разработки). Это мощная CSS-grid, и к концу этого месяца она будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре в других браузерах (надеюсь).
Базовый тест
Чтобы понять, что это такое - создавать макеты с каждой системой, мы создадим одну и ту же HTML-страницу дважды - один раз с помощью flexbox и еще один раз с CSS grid. Вы можете скачать оба проекта или просмотреть их в этой демонстрационной онлайн-версии:
Дизайн довольно простой - он состоит из центрированного контейнера, внутри которого у нас есть заголовок, главный раздел, боковая панель и футер. Вот основные «проблемы», которые мы должны решить, сохраняя CSS и HTML как можно более чистыми:
- Разместить четыре основные секции на макете
- Сделать страницу адаптивной (sidebar должен уходить вниз основного контента на меньших экранах)
- Выровнять содержимое заголовка - навигация слева, кнопка справа.
Как вы можете видеть, ради сравнения мы сделали все очень просто. Начнем с проблемы номер один.
Задача 1: Позиционирование разделов страницы
Решение Flexbox
Мы начнем с решения flexbox. Добавляем display: flex в контейнер и направляем его дочерние элементы по вертикали. Это позиционирует все разделы друг под другом.
.container {
display: flex;
flex-direction: column;
}Теперь нам нужно установить основной раздел и боковую панель рядом друг с другом. Поскольку flex контейнеры обычно однонаправлены, нам необходимо добавить wrapper.
Теперь установим элементы wrapper 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 {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
footer {
grid-area: footer;
}
Теперь мы можем настроить grid и определить расположение каждой области. В первый раз код может показаться достаточно сложным, но после того, как вы однажды познакомитесь с системой grid, это перестанет быть для вас проблемой.
.container {
display: grid;
/* Определим размер и число колонок нашей сетки.
fr работает подобно flex. fr поделит свободное пространствно в строке пропорционально их значению.
У нас две колонки - первая будет в три раза больше второй. */
grid-template-columns: 3fr 1fr;
/* Назначим области сетки определенным местам на сетке.
Первая строка - header.
Вторая будет поделена между main и sidebar.
Последняя для footer. */
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
/* Оступы между ячейками сетки будут 60 пикселей. */
grid-gap: 60px;
}
И вот свершилось! Наша разметка теперь соответствует структуре, определенной выше и благодаря тому, как мы её настроили нам не придется иметь дело с внешними и внутренними отступами.
Задача 2: Сделать страницу адаптивной
Решение Flexbox
Выполнение этого шага напрямую связано с предыдущим. Для этого решения мы должны будем изменить flex-direction wrapper’а и подогнать некоторые отступы.
@media (max-width: 600px) {
.main-and-sidebar-wrapper {
flex-direction: column;
}
.main {
margin-right: 0;
margin-bottom: 60px;
}
}
Наша страница настолько проста, что у нас нет необходимости менять много элементов, но на странице с более сложной структурой нужно будет переопределить большее количество элементов.
Решение CSS
С того момента, когда мы определили grid-areas нам остается только изменить их порядок в медиа-запросе. Для этого мы можем использовать ту же настройку столбцов.
@media (max-width: 600px) {
.container {
/* Realign the grid areas for a mobile layout. */
grid-template-areas:
"header header"
"main main"
"sidebar sidebar"
"footer footer";
}
}
Или мы можем переопределить весь макет с нуля, если посчитаем это более чистым решением.
@media (max-width: 600px) {
.container {
/* Redefine the grid into a single column layout. */
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
Задача 3: выровнять элементы заголовка
Решение Flexbox
Наш header содержит некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри nav должны быть точно выровнены по отношению друг к другу.
Мы уже делали подобную разметку с flexbox в одной из предыдущих статей.
Техника очень проста:
header {
display: flex;
justify-content: space-between;
}Сейчас навигация и кнопка отлично выровнены. Все что осталось сделать — это установить элементы внутри