skip to main content

grid-template-areas

css

Кратко 🔗

Позволяет задать шаблон сетки расположения элементов внутри грид-контейнера. Имена областей задаются при помощи свойства grid-area. Текущее свойство grid-template-areas просто указывает, где должны располагаться эти грид-область.

Пример 🔗

.container {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: repeat(4, 150px);
grid-template-areas:
"header header header"
"content content 👾"
"content content ."
"footer footer footer";
}

Как пишется 🔗

  • none (значение по умолчанию) — области сетки не задано имя.
  • . — означает пустую ячейку.
  • name — собственно название области, может быть абсолютно любым словом или даже эмоджи! 🤯

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

.container {
display: grid;
grid-template-columns: 1fr 200px 1fr;
grid-template-rows: repeat(4, 150px);
grid-template-areas:
"header header header"
"content content 👾"
"content content ."
"footer footer footer";
}

.item1 {
grid-area: header;
background-color: purple;
}

.item2 {
grid-area: content;
background-color: gray;
}

.item3 {
grid-area: 👾;
background-color: pink;
}

.item4 {
grid-area: footer;
background-color: #bada55;
}

Обратите внимание, что между строками не ставятся запятые или какие-то другие символы, имена разделяются пробелами.

Получится такая раскладка:

Пример реализации свойства grid-template-areas

Подсказки 🔗

💡 Имена областей должны разделяться пробелами. Это важно особенно в том случае, если вы хотите расположить рядом две пустых ячейки рядом. Разделите точки пробелами, иначе браузер подумает что это одна пустая ячейка.

Автор: Алёна,