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

Это последняя статья на тему "CSS Grid", в которой мы разберем свойства grid элементов, позволяющие тонко настроить расположение этих элементов в сетке. Если вы пропустили 4 предыдущих части (а это возможно вообще?), то вот вам ссылки на них: часть 1, часть 2, часть 3 и часть 4.

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

Свойства grid элементов для размещения

Итак, начнем с самых главных свойств: "grid-column-start", "grid-column-end", "grid-row-start", "grid-row-end". Они определяют местоположение grid элемента в сетке, ссылаясь на конкретные линии сетки. grid-column-start / grid-row-start - это линия, от которой начинается элемент, а grid-column-end / grid-row-end - это линия, в которой заканчивается элемент (если забыли, что такое грид линия, прочитайте еще раз эту статью).

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

1. <line> - может быть числом для обозначения пронумерованной линии сетки или именем для обозначения именованной линии сетки.
2. span <число> - элемент будет охватывать указанное количество дорожек сетки (grid track).
3. span <name> - элемент будет охватывать дорожки сетки, пока не достигнет линии с указанным именем.
4. auto - указывает на автоматическое размещение, автоматический диапазон или диапазон по умолчанию, равный одному.

Например, следующий код:

Даст следующий результат (описание шаблона сетки, в который данный элемент встраивается, опущен - попробуйте для практики сами написать код для него и проверить результат в Mozilla Toolbox):

А следующий код:

Даст такой результат:

Если не задано одно из свойств "grid-column-end" или "grid-row-end", элемент будет растягиваться на одну дорожку по умолчанию.

Элементы могут перекрывать друг друга. Вы можете использовать "z-index" для контроля порядка размещения.

Также для всех этих свойств существует два сокращения: "grid-column" ("grid-column-start" + "grid-column-end") и "grid-row" ("grid-row-start" + "grid-row-end"). Они принимают значение <start-line> / <end-line> - оно аналогично значениям свойств, которые они заменяют, включая span.

Например, следующий код:

Даст результат:

Если значение конечной линии не объявлено, элемент будет охватывать 1 дорожку по умолчанию.

И еще одно свойство, которое вы должны были предположить, помня о свойстве "grid-template-areas" grid контейнера - это свойство "grid-area". Оно указывает, какую именно область должен занимать элемент в сетке, описанной с помощью свойства "grid-template-areas". В качестве альтернативы, это свойство может использоваться как еще более короткое сокращение для "grid-row-start" + "grid-column-start" + "grid-row-end" + "grid-column-end". Иначе говоря, данное свойство принимает следующие значения:

1. <name> - имя области в шаблоне.
2. <row-start> / <column-start> / <row-end> / <column-end> - номера или имена линий грида.

Например, если у нас есть шаблон сетки:

То с помощью кода:

Мы разместим элемент по всей первой строке шаблона, так как мы отвели под "header" в нем целую строку.

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

Даст следующий результат:

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

Помните статью с кучей картинок и кода, демонстрирующую различные возможности по выравниванию элементов внутри ячеек сетки? Да, мы можем делать аналогичные вещи для конкретного элемента с помощью следующих свойств:

1) justify-self - выравнивает элемент сетки внутри ячейки вдоль горизонтальной оси (строки) (в отличие от align-self, которое выравнивает элемент вдоль вертикальной оси (столбца)). Это значение применяется к элементу сетки внутри одной ячейки:

1. start - выравнивает элемент сетки так, чтобы он был вровень с начальным краем ячейки.
2. end - выравнивает элемент сетки так, чтобы он был вровень с конечным краем ячейки.
3. center - выравнивание элемента по центру ячейки.
4. stretch - элемент заполняет всю длину ячейки (по умолчанию).

Примеры кода и результатов его выполнения:

2) align-self - выравнивает элемент сетки внутри ячейки по вертикальной оси (столбцу) (в отличие от justify-self, которое выравнивает элемент вдоль горизонтальной оси (строки)). Это значение применяется к элементу сетки внутри одной ячейки:

1. start - выравнивает элемент сетки так, чтобы он был вровень с верхним краем ячейки.
2. end - выравнивает элемент сетки так, чтобы он был вровень с нижним краем ячейки.
3. center - выравнивание элемента по центру ячейки.
4. stretch - элемент заполняет всю ширину ячейки (по умолчанию).

Примеры кода и результатов его выполнения:

3) place-self - устанавливает одновременно "justify-self" и "align-self". Принимает следующие значения:

1. auto - выравнивание по умолчанию.
2. <align-self> / <justify-self> - первое значение устанавливает "align-self", второе значение - "justify-self". Если второе значение опущено, первое значение присваивается обоим свойствам.

Например:

Итого

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

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