Как работать с CSS Grid: Часть 2

В предыдущей статье мы разобрались в терминологии CSS Grid, мельком взглянули на представление грида в браузерных инструментах разработчика (Dev Tools), а также перечислили все CSS свойства. Давайте разбираться подробнее с каждым из этих свойств.

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

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

Updated: Вышла третья часть, ознакомиться можно здесь.

Свойства Grid контейнера

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

Сначала взглянем на первые четыре важных свойства:

1) display. Определяет элемент как Grid контейнер и устанавливает новый контекст форматирования сетки для его содержимого, то есть все непосредственные потомки этого контейнера будут понимать, что они находятся внутри Grid контейнера. Возможные значения:

• grid - генерирует блочный grid контейнер (в основном, используется именно этот вид грида);
• inline-grid - генерирует инлайновый (строчный) грид (пока не берем этот вариант на рассмотрение);

Без этого свойства не будет работать все остальное, поэтому всегда в первую очередь пишите его при создании сетки.

2) grid-template-columns и grid-template-rows. Определяют столбцы и строки сетки. Значения этих свойств перечисляются списком, разделенным пробелами. Эти значения представляют размер дорожки (Grid track), а пространство между ними представляет линию сетки (Grid lines). Это одни из самых сложных свойств для понимания, потому что они являются сердцем грида - именно они отвечают за макет сетки, и эту сетку можно весьма тонко настроить под любые нужды.

3) grid-template-areas. Определяет шаблон сетки, ссылаясь на имена областей сетки, которые указываются с помощью свойства "grid-area" (разберем в будущем). Повторение имени области сетки приводит к тому, что контент сетки разместится ровно по этой повторяющейся области. Точка означает пустую ячейку. Сам синтаксис обеспечивает визуализацию структуры сетки. Тоже сложное для понимания свойство. Однако, на примерах станет понятнее, в чем его фишка. Как вы поняли, грид можно описать либо предыдущими двумя свойствами, либо этим.

Подробнее о grid-template-columns и grid-template-rows

Главная составляющая грида - его ячейка (Grid Cell), которая находится на пересечении горизонтальных и вертикальных линий сетки. Поэтому при описании значений свойств grid-template-columns и grid-template-rows представляйте на месте написанных значений ячейки. Например код:

Создаст 3 колонки размерами 300, 200 и 100 пикселей и 2 строки размером по 50 пикселей. Результат в браузере выглядит так (с включенными Dev Tools, конечно же):

То есть вы просто берете и прямо в свойствах описываете сетку. Нужна сетка 5 на 4? Пишите 5 значений в grid-template-columns и 4 значения в grid-template-rows.

Разумеется, значения можно указывать не только в пикселях. Еще есть хорошо знакомые нам по Flexbox проценты (%) и значение "auto" (автоматический размер):

Результат выполнения этого кода я представлю вот такой картинкой:

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

Во-вторых, на этом рисунке есть еще кое-что интересное - числа возле строковых и столбцовых (столбиковых, столбачных?) линий. Это автоматически присвоенные имена линий сетки. Еще раз напомню: грид (сетка) состоит из линий (lines), между которыми располагаются дорожки (tracks), которые делятся на ячейки (cells). Внимательно посмотрите еще раз на рисунок: у нас грид состоит из 5 ВЕРТИКАЛЬНЫХ ДОРОЖЕК (белого цвета), которые расположились между 6 ВЕРТИКАЛЬНЫХ ЛИНИЙ (черного цвета). Это важно для понимания построения сложных сеток: у вас всегда линий на ОДНУ больше, чем дорожек. Обязательно запомните отличие линий (lines) от дорожек (tracks), иначе вам совсем худо будет в дальнейшем разборе.

Зачем линиям автоматом присвоились эти числа? Они понадобятся для свойств grid элементов, которые мы разберем позже. Если коротко - по этим числам можно описать, сколько ячеек каждый из потомков грида будет занимать. Однако, если вам не нравится вариант с числами, мы можем задавать имена линиям самостоятельно:

В этом случае получим такую картину:

Можно даже задавать двойные имена: одно на окончание линии, второе на начало:

Если вы хотите сделать одинаковые размеры ячейкам с одинаковыми именами линий, можно воспользоваться функцией "repeat":

Для полной картины нужно разобрать новую величину, применяемую в гридах под названием "fraction" (часть), которая обозначается как "fr". Единица "fr" позволяет вам установить размер дорожки как часть свободного пространства grid контейнера. В этом примере каждый элемент будет равен одной трети ширины контейнера сетки:

Это очень похоже на флексбоксовский "flex-grow". Основной момент, который нужно здесь запомнить - свободное пространство вычисляется после негибких значений, то есть в этом примере:

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

Подробнее о grid-template-areas

Посмотрим на общий синтаксис данного свойства:

Мы можем задавать конкретные имена областей, ставить точку, если хотим пропустить область, или вообще не задавать области с помощью "none".

В чем идея: когда вы знаете точный макет страницы, вы можете сразу задать гриду области, в которые поместите контент. Например, у вас есть заголовок (header), область основного контента (main), боковая панель (sidebar) и "подвал" (footer). Тогда для этих областей вы можете написать следующий код:

Как вы видите, ничего сложного в этом свойстве нет. Чтобы сослаться элементам на эти области, мы используем свойство "grid-area" внутри каждого из элементов:

Все вместе создает сетку шириной в четыре столбца и высотой в три ряда. Весь верхний ряд будет состоять из области заголовка. Средний ряд будет состоять из двух основных областей, одной пустой ячейки и одной области боковой панели. Весь последний ряд - футер:

Обратите внимание, что вы не называете строки с этим синтаксисом, а только области. Когда вы используете этот синтаксис, строки на обоих концах областей получают имена автоматически. Если имя grid области - "foo", именем начальной линии строки (row grid line) и начальной линии столбца (column grid line) будет "foo-start", а именем последней линии строки и последней линии столбца будет "foo-end". Это означает, что некоторые строки могут иметь несколько имен, например крайняя левая строка в приведенном выше примере будет иметь три имени: "header-start", "main-start" и "footer-start".

Думаю, на этом мы пока остановимся, а то мозг закипит (у меня у самого он закипел, пока это писал).

Итого

Мы начали разбор CSS свойств Grid контейнера. Сами определение того, за что они отвечают, дать так, чтобы стало понятно сразу, весьма затруднительно. Потому что инструмент мощный и может делать многие вещи несколькими способами. Сделать простой для понимания инструмент, решающий сложные задачи, практически невозможно. С другой стороны, на конкретных примерах сразу становится понятно, что, куда и зачем. Потому я настоятельно рекомендую вам писать код для грида самостоятельно и смотреть, что получается в результате. В случае вопросов по конкретно этим свойствам пишите мне (@lex_robot) или боту обратной связи (@emotional_feedback_ro_bot). Остальные свойства разберем в следующих статьях.