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

В предыдущей статье мы познакомились с таким замечательным инструментом, как Mozilla Toolbox. В нем отлично реализована поддержка CSS Grid - можно более тонко настроить сетку, анализируя текущий результат в браузере. Рекомендую со статьей о Mozilla Toolbox ознакомиться тем, кто еще этого не сделал, потому что данный материал будет опираться на неё.

Самый главный момент, который мы выделили из прошлой статьи - CSS Grid поддерживает явные и неявные сетки. Явная сетка - та, которую мы явно задали с помощью свойств "grid-template-rows", "grid-template-columns", "grid-template-areas" и "grid-template". И все элементы-потомки такой сетки разместятся в ней, согласно заданному шаблону. Но если элемент "вываливается" из шаблона (он лишний или слишком большой), в игру вступает неявная сетка. И для её настройки также существует несколько свойств, с которыми мы сейчас познакомимся.

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

Свойства для работы с неявными сетками

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

1. grid-auto-columns - задает размер для неявных столбцов сетки.
2. grid-auto-rows - задает размер для неявных строк сетки.

Значением для этих свойств будет:

<track-size> - может быть длиной, процентом или долей свободного пространства в сетке (используя единицу "fr").

Давайте последовательно разбираться. Допустим, у нас есть следующий шаблон сетки:

Который в браузере будет выглядеть так:

У нас задана сетка размером 2 на 2. Теперь представим, что мы разместили элементы в этой сетке следующим образом (не волнуйтесь на счет новых свойств, мы их подробно разберем в следующей статье, сейчас главное понять идею):

Результатом выполнения данного кода будет (или вы можете исследовать эту сетку в браузере Mozilla Firefox):

Мы задали для ".item-b" расположение, начинающееся с пятой линии столбца и заканчивающееся шестой линией столбца, но мы не определили 5 и 6 линии столбцов. Поскольку мы ссылаемся на несуществующие строки, создаются неявные дорожки (grid track) шириной 0 (ноль), чтобы заполнить возникшие промежутки.

Теперь должно стать понятно, для чего созданы свойства "grid-auto-columns" и "grid-auto-row" - чтобы указать длину и ширину этих неявных дорожек:

grid-auto-flow

Сейчас мы познакомимся с настоящей магией CSS Grid. Мало того, что грид сам по себе умеет расставлять автоматически элементы, которые не попадают в явный шаблон, так мы еще можем ему сказать, как именно размещать эти элементы - задать алгоритм размещения. За этот алгоритм отвечает свойство "grid-auto-flow", которое принимает следующие значения:

1. row - указывает алгоритму автоматического размещения заполнять каждую строку по очереди, добавляя новые строки по мере необходимости (по умолчанию);
2. column - указывает алгоритму автоматического размещения заполнять каждый столбец по очереди, добавляя новые столбцы по мере необходимости;
3. dense - указывает алгоритму автоматического размещения попытаться заполнить отверстия в сетке следующим образом: если более мелкий элемент, стоящий дальше отверстия, сможет в него поместиться, то нужно сделать это. Собственно, dense так и переводится - плотность, мы "сжимаем" нашу сетку, чтобы сделать её компактной. Обратите внимание, что "dense" изменяет только визуальный порядок элементов и может привести к тому, что они будут отображаться не по порядку, что плохо для доступности.

Допустим, у нас есть следующий код:

Поскольку мы устанавливаем "grid-auto-flow" на "row", наша сетка будет выглядеть следующим образом: (обратите внимание, как именно три элемента, которым мы не задали явное размещение (item-b, item-c и item-d), встали в доступные строки сетки):

Если мы установим свойству "grid-auto-flow" значение "column", то элементы разместятся следующим образом:

Попробуйте сами поиграться с этими свойствами: задайте явный шаблон сетки, разместите явным образом несколько элементов, затем задайте "grid-auto-flow" и проверьте результат с помощью Mozilla Toolbox.

Свойство "grid"

Последнее свойство, которое нужно разобрать в теме grid контейнера (да неужели?) - свойство "grid". Это сокращение для установки всех следующих свойств в одном объявлении (только со стула не упадите): "grid-template-row", "grid-template-columns", "grid-template-areas", "grid-auto-row", "grid-auto-columns" и "grid-auto-flow" (пометка: вы можете указать явные или неявные свойства сетки только в одном объявлении сетки).

Данное свойство принимает следующее конское значение:

1. none - устанавливает все подчиненные свойства в их начальные значения (а-ля по дефолту);
2. <grid-template> - работает так же, как свойство-сокращение "grid-template" грида.
3. <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? - устанавливает "grid-template-rows" в указанное значение (вопросы в конце означают необязательность). Если ключевое слово "auto-flow" находится справа от косой черты, оно устанавливает "grid-auto-flow" для столбцов. Если указано дополнительно ключевое слово "dense", алгоритм автоматического размещения использует «плотную» упаковку. Если "grid-auto-columns" пропущен, он устанавливается на auto.
4.  [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> - устанавливает "grid-template-columns" в указанное значение. Если ключевое слово "auto-flow" находится слева от косой черты, оно устанавливает "grid-auto-flow" для строк. Если указано дополнительно ключевое слово "dense", алгоритм автоматического размещения использует «плотную» упаковку. Если "grid-auto-rows" пропущен, он устанавливается на auto.

Давайте приведу парочку примеров значения свойства "grid" и его аналогичных значений в отдельных свойствах:

Свойство "grid" также принимает более сложный, но довольно удобный синтаксис для настройки всего сразу. Вы задаете "grid-template-areas", "grid-template-rows" and "grid-template-columns", а все остальные вложенные свойства устанавливаются в их начальные значения. Вы указываете имена линий и размеры дорожек у соответствующих областей сетки. Это проще всего описать на примере:

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

Дополнение по функциям и специальным словам

1. При определении размера строк и столбцов вы можете использовать все длины с конкретными значениями, например, px, rem, % и т. д. Но у вас также есть ключевые слова, такие как "min-content", "max-content", "auto" и, пожалуй, самые полезные дробные единицы - fr: grid-template-columns: 200px 1fr 2fr min-content;
2. У вас также есть доступ к функции, которая может помочь установить границы для других гибких единиц. Например, чтобы задать для столбца значение 1fr, но не более 200px, можно использовать следующий код: grid-template-columns: 1fr minmax (200px, 1fr);
3. Существует функция "repeat()", которая позволяет коротко задать одинаковые столбцы или строки. Например, следующий код создаст 10 столбцов размером 1fr: grid-template-columns: repeat (10, 1fr);
4. Объединение всего выше перечисленного может быть чрезвычайно мощным, например: grid-template-columns: repeat(auto-fill, minmax (200px, 1fr));

Итого

Я вас поздравляю - наконец-то мы закончили разбор свойств grid контейнера. Это было нелегко, и думаю, что в дальнейшем тоже будет тяжеловато, пока это все нормально отложится в голове и вы сможете спокойно применять это в работе. Только практика позволит окончательно разобраться с этой кучей свойств.

Однако, у нас остались свойства для grid элементов. Но с ними мы быстро разберемся, тем более, что их основной смысл уже затронут в этой и прошлой статьях - размещение элементов внутри шаблона сетки. Потому не пропустите следующую статью, дабы у вас сложилась полноценная картинка по CSS Grid.