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

Продолжаем знакомство с таким полезным инструментом, как CSS Grid. С предыдущими двумя частями можно ознакомиться здесь и здесь.

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

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

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

Сейчас будет очень много кода и картинок. Но спешу успокоить - какие-то свойства окажутся очень знакомыми (привет, Flexbox контейнер), другие же не будут такими сложными для восприятия, как в предыдущей статье.

1) grid-template. Сокращенная запись для grid-template-rows, grid-template-columns и grid-template-areas (читайте об этих свойствах в предыдущей статье). Его фишка в том, что вы можете указать либо два свойства grid-template-rows и grid-template-columns (или вообще "none" поставить):

либо все три свойства:

что эквивалентно следующему коду:

Здесь каждый для себя решает сам, каким вариантом пользоваться (все свойства по отдельности или вместе), каких-то конкретных рекомендаций нет. Я задаю отдельными свойствами.

2) column-gap и row-gap. Еще одна пара интересных свойств. Как вы должны были усвоить из прошлых статей, грид состоит из линий и треков. Так вот линиям можно задавать ширину с помощью этих двух свойств:

Результат выполнения этого кода будет таким:

Примечание: раньше эти свойства были с префиксом "grid-", то есть "grid-column-gap" и "grid-row-gap". Это важно помнить в случае работы со старыми версиями браузеров (но лучше обновить сам браузер, конечно же).

3) gap. Сокращение для свойств "row-gap" и "column-gap" (в прошлом также содержало префикс "grid-"):

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

4) justify-items. Выравнивание элементов внутри ячеек грида вдоль горизонтальной оси. Может принимать значения:

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

На примерах кода и картинках станет понятнее:

5) align-items. Выравнивание элементов внутри ячеек грида вдоль вертикальной оси. Может принимать значения:

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

На примерах кода и картинках станет понятнее:

6) place-items. Сокращенная запись для "justify-items" и "align-items". Принимает значение:

<align-items> / <justify-items> - первое значение устанавливает "align-items", второе - "justify-items":

Если указано одно значение, оно применится и для "align-items", и для "justify-items".

7) justify-content. Иногда общий размер сетки может быть меньше размера ее контейнера. Это может произойти, если все элементы сетки имеют размеры с негибкими единицами, например, пиксели (px). В этом случае возможно установить выравнивание сетки внутри grid контейнера. "justify-content" выравнивает сетку вдоль горизонтальной оси. Это свойство принимает значения:

1. start - выравнивает сетки по левому краю grid контейнера;
2. end - выравнивает сетки по правому краю grid контейнера;
3. center - выравнивание сетки в центре grid контейнера;
4. stretch - растягивает сетку на всю длину grid контейнера;
5. space-around - пробелы между элементами grid контейнера: между левым и правым краями пробелы в два раза меньше, чем пробелы между элементами;
6. space-between - пробелы между элементами grid контейнера: первый и последний элементы стоят вплотную к левому и правому краям;
7. space-evenly - равные пробелы между элементами и левым и правым краями grid контейнера;

Свойства "space-around", "space-between" и "space-evenly" работают аналогично одноименным свойствам Flexbox контейнера.

На примерах кода и картинках станет понятнее:

8) align-content. Иногда общий размер сетки может быть меньше размера ее контейнера. Это может произойти, если все элементы сетки имеют размеры с негибкими единицами, например, пикселями (px). В этом случае возможно установить выравнивание сетки внутри grid контейнера. "align-content" выравнивает сетку по вертикальной оси. Это свойство принимает значения:

1. start - выравнивает сетку по верхнему краю grid контейнера;
2. end - выравнивает сетку по нижнему краю grid контейнера;
3. center - выравнивает сетку по центру grid контейнера;
4. stretch - растягивает сетку на всю ширину grid контейнера;
5. space-around - пробелы между элементами grid контейнера: между верхним и нижним краями пробелы в два раза меньше, чем пробелы между элементами;
6. space-between - пробелы между элементами grid контейнера: первый и последний элементы стоят вплотную к верхнему и нижнему краям;
7. space-evenly - равные пробелы между элементами и верхним и нижним краями grid контейнера;

На примерах кода и картинках станет понятнее:

9) place-content. Сокращенная запись для "justify-content" и "align-content". Принимает значение:

<align-content> / <justify-content> - первое значение устанавливает "align-content", второе - "justify-content":

Если указано одно значение, оно применится и для "align-content", и для "justify-content".

На этом остановимся. У Grid контейнера есть еще несколько важных свойств, но мы их разберем позже, так как для окончательного понимания нам нужно предварительно разобрать другой инструмент разработчика.

Итого

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