grid-template-areas

grid-template-areas: none | <string>+

📝 Описание

Определяет именованные области grid-сетки.

Значение по умолчанию: none

🎯 Возможные значения

  • none — нет именованных областей
  • <string> — строка с именами областей, разделёнными пробелами
  • . — пустая ячейка
.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

🌐 Поддержка браузеров

Все современные браузеры

📚 Подробнее

Подробнее об этом свойстве вы можете узнать в нашем руководстве: Полное руководство по CSS Grid