Содержание
Ещё недавно макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.
Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.
Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.
Базовый макет
Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда или проверить их в этой демонстрационной версии.
Уменьшенный макет веб-страницы
Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:
- Разместить четыре основных раздела макета.
- Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
- Выровнять содержимое шапки — навигация слева, кнопка справа.
Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.
Испытание 1. Размещение разделов страницы
Решение на Flexbox
Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.
Теперь нам нужно сделать так, чтобы основной раздел и боковая панель располагались рядом. Поскольку flex-контейнеры обычно однонаправлены, нам нужно добавить дополнительный элемент.
Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.
Последний шаг — задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.
Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.
Решение на CSS Grid
Существует несколько вариантов использования CSS Gr >grid-template-areas , как наиболее подходящего для наших целей.
Сперва мы определим четыре grid-area , по одному на каждый раздел страницы:
Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.
Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding .
Испытание 2. Делаем страницу адаптивной
Решение на Flexbox
Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin .
Наша страница довольно простая, поэтому в медиа-запросе мало работы, но в более сложном макете придётся много чего переделывать.
Решение на CSS Grid
Поскольку мы уже определили grid-areas , нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.
Или можем переопределить весь макет с нуля, если считаем, что это решение чище.
Испытание 3. Выравнивание компонентов шапки
Наша шапка включает некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри навигации должны быть выровнены относительно друг друга.
Решение на Flexbox
Мы уже делали похожий макет на Flexbox в одной из наших старых статей — Простейший способ создания адаптивной шапки. Техника довольно простая:
Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри по горизонтали. Проще это сделать с помощью display: inline-block , но поскольку мы собираемся целиком использовать Flexbox, применим решение только для него:
Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.
Решение на CSS Grid
Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.
Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:
Ссылки строчные, но они не могут быть выровнены правильно, поскольку не существует варианта baseline , как у align-items . Мы также должны определить ещё одну вложенную сетку.
Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.
Выводы
Если вы прочитали статью целиком (а это отличная работа!), выводы не должны вас удивить. На деле нет лучшей системы — и Flexbox и CSS Grid хороши по своему и должны использоваться совместно, а не как альтернатива друг другу.
Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:
- CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
- Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
- Используйте CSS Grid для двумерных макетов (строк И колонок).
- Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
- Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.
Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.
Что вы узнаете из этой статьи:
- как раньше работали с CSS-разметкой;
- разницу между устаревшими подходами и современными стандартами;
- как начать работу с новыми стандартами (Flexbox и Grid);
- почему вас должны волновать эти современные стандарты.
Как раньше работали с CSS-разметкой
Задача
Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?
Вот пример того, к чему мы стремимся:
Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента
Для начала я покажу, как решить эту задачу с помощью устаревших подходов.
Статья раскроет, как и где лучше использовать тот или иной инструмент, так как 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 в контейнер и направляем его дочерние элементы по вертикали. Это позиционирует все разделы друг под другом.
Теперь нам нужно установить основной раздел и боковую панель рядом друг с другом. Поскольку flex контейнеры обычно однонаправлены, нам необходимо добавить wrapper.
Теперь установим элементы wrapper display:flex и flex-direction в противоположном направлении.
Последний шаг — установить размер основного раздела и сайдбара. Мы хотим, чтобы он был в три раза больше сайдбара, что не сложно сделать с помощью flex или процентов.
Как вы можете видеть flexbox справился с этим очень хорошо, но, тем не менее, нам было необходимо применить множество свойств CSS + добавить дополнительный элемент HTML. Давайте теперь посмотрим, как с этим справится CSS Grid.
Решение CSS Grid
Существует пара разных способов использования CSS Grid, но мы будем использовать grid-template-areas синтаксис, так как он выглядит наиболее подходящим для того, что мы планируем сделать.
Для начала определим четыре grid-area , по одному на каждую секцию страницы.
Теперь мы можем настроить grid и определить расположение каждой области. В первый раз код может показаться достаточно сложным, но после того, как вы однажды познакомитесь с системой grid, это перестанет быть для вас проблемой.
И вот свершилось! Наша разметка теперь соответствует структуре, определенной выше и благодаря тому, как мы её настроили нам не придется иметь дело с внешними и внутренними отступами.
Задача 2: Сделать страницу адаптивной
Выполнение этого шага напрямую связано с предыдущим. Для этого решения мы должны будем изменить flex-direction wrapper’а и подогнать некоторые отступы.
Наша страница настолько проста, что у нас нет необходимости менять много элементов, но на странице с более сложной структурой нужно будет переопределить большее количество элементов.
С того момента, когда мы определили grid-areas нам остается только изменить их порядок в медиа-запросе. Для этого мы можем использовать ту же настройку столбцов.
Или мы можем переопределить весь макет с нуля, если посчитаем это более чистым решением.
Задача 3: выровнять элементы заголовка
Наш header содержит некоторые ссылки навигации и кнопку. Мы хотим, чтобы навигация была слева, а кнопка справа. Ссылки внутри nav должны быть точно выровнены по отношению друг к другу.
Мы уже делали подобную разметку с flexbox в одной из предыдущих статей.
Техника очень проста:
Сейчас навигация и кнопка отлично выровнены. Все что осталось сделать — это установить элементы внутри