Практическое использование css-свойств grid-template-areas и grid-area

Одним из свойств CSS Grid Layout является назначение grid-областей в виде использования свойства grid-template-areas для контейнера и grid-area для вложенных в него элементов сетки. Как и с большинством других свойств CSS Grid, здесь мы сталкиваемся с большим разнообразием вариантов назначения этого свойства.

Варианты значений свойства grid-template-areas

Для grid-контейнера можно задать шаблон для областей в виде имен в кавычках. Для этого используется специальное свойство grid-template-areas. Вы можете использовать такие варианты значений:

Использование именованных grid-областей

Именованные grid-области, пожалуй, один из самых простых и самых наглядных вариантов назначения свойств grid-template-areas и grid-area. Для контейнера мы указываем свойства , определяющие, как будут проходить линии сетки и ее столбцы, задавая свойства grid-template-columns и grid-template-rows, а затем указываем свойство grid-template-areas, в котором в кавычках построчно перечисляем, где будут находиться какие из именованных областей. Имя вы можете задать какое-угодно, но это должна быть строка, причем желательно, чтобы ее наименование хоть как-то соответствовало тому блоку, который в ней будет находиться.

Этот код говорит о том, что внутри grid-контейнера будет 3 строки, делящие его пространство в соотношении 1:3:1 по вертикали, а по горизонтали линии столбцов будут иметь одинаковую ширину в соотношении 1:1:1, т.к. в свойстве grid-template-columns указано повторение 3 раза столбца в 1fr.

Для вложенных элементов header, main, aside и footer назначены такие свойства:

На скриншоте ниже, сделанном в Инспекторе свойств браузера Mozilla Firefox, видно, как расположились все области:

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

В результате получим изменение внешнего вида макета и в браузере:

Вы можете посмотреть приведенный пример кода ниже. Нажмите на вкладку CSS, чтобы посмотреть, как изменится расположение grid-областей в макете.

See the Pen Grid area by Elen (@ambassador) on CodePen.

Пустые области сетки

В том случае, когда вам нужно, чтобы сетка имела пустые промежутки, просто поставьте точку вместо какого-либо имени области:

Попробуйте сами, используя CSS Grid Generator от Anthony Dugois, в котором можно перетягивать области сетки, получая таким образом макет для дальнейшего использования.

See the Pen CSS Grid  Template Builder by Anthony Dugois (@anthonydugois) on CodePen.

Варианты значений свойства grid-area

По умолчанию значение grid-area имеет значение auto, что значит , что размер элемента соответствует одной ячейке грид-сетки. Вы также можете назначить именованную грид-область или задать ее между определенными номерами линий сетки.  Интересно, что в том случае, если вы назначите имена для линий сетки, используя -start и -end в конце, то название области вы сформируете автоматически.

Возможные варианты значений свойства grid-area

При использовании номеров сетки вы можете задать четыре значения grid-line. Первое из них определяет grid-row-start , второе значение -  grid-column-start , третье значение -  grid-row-end и четвёртое значение -  grid-column-end.

Для того чтобы не запутаться в числах, их можно описать в виде последовательности правил:

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

В примере ниже мы используем это свойство для назначения grid-area из индексов grid-линий:

Сетка для мониторов будет выглядеть так:

Внимательно посмотрите на индексы (номера) линий, и тогда станет понятно распределение столбцов и строк в ней для свойств grid-area каждого grid-элемента с классом .item.

Вот, что у нас получилось в результате:

See the Pen Grid areas by Elen (@ambassador) on CodePen.

Медиа-запросы для сетки

На данный момент важно, как мы можем перестроить столбцы и строки сетки для экранов планшетов и телефонов.

Поскольку в нашем примере максимальная ширина сетки составляет 1200px, то для экранов, которые меньше этого значения, нам придется перестроить сетку в 3 столбца. А количество строк мы можем сформировать с помощью значения minmax(225px, auto):

Внешний вид сетки представлен на скриншоте ниже.

Для экранов планшетов мы уменьшим количество столбцов до 2-х:

Внешний вид сетки для планшетов теперь такой:

Для смартфонов уже привычной стала сетка из одной колонки, поэтому css-правила для экранов, меньших 525px, таковы:

Внешний вид нашего примера опять поменялся:

Пример grid-area с множеством столбцов и строк

Более сложный пример предполагает сетку из множества столбцов, которые распределяются по линиям сетки с помощью не только индексов, но и ключевого слова span и цифры, показывающих, сколько столбцов или строк объединяются в одну область.

See the Pen Grid Area with Span by Elen (@ambassador) on CodePen.

Пример использования grid-area с анимированными блоками

Автор Lisi 

See the Pen Hover Card Interaction by Lisi (@lisilinhart) on CodePen.