Верстаем правильно: знакомство с Flexbox и Grid

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

• как раньше работали с CSS-разметкой;
• разницу между устаревшими подходами и современными стандартами;
• как начать работу с новыми стандартами (Flexbox и Grid);
• почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

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

Очевидно, что в main больше текста.

Выделим aside цветом, чтобы его проще было отличить:

Для этого напишем следующее:

Этот стиль разделяет доступное пространство в необходимых пропорциях и устанавливает float для aside и main .

Два блока, расположенные рядом

Для тех, кто не знаком с float : это относительно старый способ перемещения элементов влево или вправо.

Как видно на изображении выше, задача всё ещё не выполнена — высота боковой панели не совпадает с высотой основной зоны. Исправим это.

Чтобы решить эту проблему, надо использовать display: table .

Если вы с ним не знакомы, то вот что надо делать:

1. Делаем родительский контейнер (в нашем случае элемент body ) таблицей:
2. Убираем float и делаем дочерние элементы aside и main ячейками таблицы:

Как только мы сделали это, задачу можно считать решенной. По крайней мере, так её решали раньше.

Оба блока теперь одинаковой высоты.

Разница между устаревшими подходами и современными стандартами

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

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

Контекст форматирования Flexbox инициализируется путем создания flex-контейнера .

Родительским элементом является body . Он содержит боковую панель и основную зону. Создаём контейнер:

Flexbox в действии

Не забудем о пропорциях:

Вуаля! Проблему можно считать решенной:

С Flexbox можно делать много разных вещей:

Отцентрировать боковую панель и основную зону по вертикальной оси:

Боковая панель и основной контент отцентрированы по вертикальной оси

Боковая панель отцентрирована по вертикальной оси

Боковая панель теперь размещена после блока с основным контентом

И я затронул лишь верхушку айсберга Flexbox.

Flexbox доступен в большинстве поддерживаемых браузеров. Им можно полноценно пользоваться в Firefox с 28 версии, Chrome с 29, Safari с 6.1 и Edge с 12.

Прим. перев. Разобраться с Flexbox поможет наше наглядное введение.

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

Начинается всё так же, как и в случае с Flexbox. Создаём контейнер:

И вот что мы получим:

Grid доступен в большинстве поддерживаемых браузеров, хотя и в меньшем количестве. Им можно полноценно пользоваться в Firefox с 52 версии, Chrome с 57, Safari с 10.1 и Edge с 16.

Наше последнее изображение пока никак не отличается от предыдущих. Так в чём же магия?

Что, если мы разделим пропорции ширины, как раньше:

Пропорциональное распределение ширины для дочерних элементов

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

Вот мы и подошли к сути Grid-разметки. После инициализации Grid-контейнера при помощи display: grid необходимо определить ряды и строки внутри него.

Вот как это делается:

Решение в одну строку — красиво, не правда ли? grid-template-columns определяет пропорции столбцов в сетке.

Но с помощью Grid можно сделать гораздо больше.

Сначала добавим немного цвета главному блоку, чтобы примеры были более наглядными:

Вот что мы должны получить:

Заливка цветом зоны основного контента

Посмотрим, что хорошего может предложить Grid:

Можно определить разрыв между столбцами:

С разрывом между колонками выглядит гораздо опрятней.

Две колонки все еще соответствуют пропорциям 30% / 70%

Добавлен разрыв между строками

Разная высота строк

Для начала хватит и этого — но это далеко не всё.

Как начать работу с новыми стандартами?

Вы увидели пример того, как Flexbox и Grid предоставляют более удобные решения для разметки. Так как начать?

Для начала я рекомендую вам попрактиковаться с примерами из этой статьи. После вы можете начать изучать более сложные случаи. И не забывайте, что Grid пока поддерживается не всеми браузерами. Кроме того, не стоит забывать об адаптивности сайта, подробнее об этом в статье про адаптивную вёрстку.

В качестве практики вас также может заинтересовать игра Flexbox Froggy, которую мы включили в подборку игр для программистов.

Почему вас должны волновать эти стандарты?

Если вы до сих пор не поняли, почему стоит использовать Flexbox и Grid, то вот несколько проблем, с которыми вы можете столкнуться при использовании предыдущих решений: