Как использовать возможности CSS grid, краткое описание свойств

07.08.18 ИТ / CSS 3003

За все время существования веб-сайтов для их разработки применялись различные подходы для необходимого размещения элементов на странице. Среди таких подходов были: табличная верстка, использование обтекания элементов при помощи float, гибкая верстка при помощи flex. Но все эти подходы все равно не очень удобны для разработки, так как приходиться прилагать усилия, чтобы разместить элементы нужным образом. Наконец, в CSS приходит совершенно новая система разметки страницы – CSS grid.

Тема CSS grid довольно большая, задача этой статьи - лишь краткое рассмотрение доступных свойств для использования при разработке. Свойства CSS grid делятся на две категории: свойства для контейнеров и свойства для самих элементов, размещаемых внутри контейнера. В этой технологии активно используется новая единица измерения – fr (fraction), она обычно представляет собой часть свободного пространства в сетке.

Какие свойства CSS grid есть для контейнеров? Рассмотрим их список ниже:

• display - задает стиль отображения блока, возможные значения: grid, inline-grid, subgrid;
• grid-template-columns – определяет колонку сетки, значения представляют из себя размер трека;
• grid-template-rows - определяет строку сетки;
• grid-template-areas – служит для определения шаблона сетки, ссылается на имена областей, заданных при помощи свойства grid-area. Возможные значения: none, ., grid-area-name;
• grid-template – сокращенная запись свойств grid-template-rows, grid-template-columns и grid-template-areas;
• grid-column-gap - определяет размер ширины линий, можно задать ширину отступов между столбцами;
• grid-row-gap - определяет размер ширины линий, можно задать ширину отступов между строками;
• grid-gap - сокращенная запись свойств grid-column-gap и grid-row-gap;
• justify-items - выравнивает содержимое контейнера вдоль оси строки, возможные значения: start, end, center, stretch;
• align-items - выравнивает содержимое контейнера вдоль оси столбца, возможные значения: start, end, center, stretch;
• justify-content - свойство выравнивает сетку вдоль оси строки, возможные значения: start, end, center, stretch, space-around, space-between, space-evenly;
• align-content - свойство выравнивает сетку вдоль оси колонки, возможные значения: start, end, center, stretch, space-around, space-between, space-evenly;
• grid-auto-columns - определяет размер любых автоматически созданных треков, созданных при явном позиционировании столбцов;
• grid-auto-rows - определяет размер любых автоматически созданных треков, созданных при явном позиционировании строк;
• grid-auto-flow - свойство контролирует работу алгоритма авто-размещения, возможные значения: row, column, dense;
• grid – сокращенное свойство для настройки вышеуказанных свойств.

Как видно, в рассматриваемой технологии есть все необходимые свойства для гибкого позиционирования элементов-контейнеров. А какие свойства CSS grid есть для элементов, размещаемых в контейнере? Рассмотрим их также, список ниже:

• grid-column-start - определяет местоположение в сетке, ссылаясь на линии, с которых начинается элемент. Актуально для столбцов;
• grid-column-end - определяет местоположение в сетке, ссылаясь на линии, на которых элемент заканчивается. Актуально для столбцов;
• grid-row-start - определяет местоположение в сетке, ссылаясь на линии, с которых начинается элемент. Актуально для строк;
• grid-row-end - определяет местоположение в сетке, ссылаясь на линии, на которых элемент заканчивается. Актуально для строк;
• grid-column – сокращенное свойство для grid-column-start и grid-column-end;
• grid-row – сокращенное свойство для grid-row-start и grid-row-end;
• grid-area - задаёт имя элементу, чтобы на него можно было ссылаться с помощью шаблона, созданного через свойство grid-template-areas;
• justify-self – служит для выравнивания содержимого элемента вдоль оси строки. Возможные значения: start, end, center, stretch;
• align-self - служит для выравнивания содержимого элемента вдоль оси столбца. Возможные значения: start, end, center, stretch.

Мы рассмотрели свойства для гибкого позиционирования элементов на странице при помощи новой технологии верстки веб-страниц. Но кроме свойств, существуют также специальные CSS grid функции:

• repeat - может использоваться в свойствах grid-template-columns и grid-template-rows, служит для динамического повторения шаблонов;
• minmax – функция служит для определения диапазона размеров, можно вычислить диапазон, который больше или равен минимальному, а также который меньше или равен максимальному;
• fit-content – функция, которая фиксирует заданный размер доступного размера в соответствии с указанной формулой.

Вместо заключения стоит сказать о том, что технология CSS grid – довольно новая, ее поддержка стала появляться только в новых версиях современных браузеров. Поэтому возможно, стоит немного подождать, пока эта технология станет использоваться повсеместно.