Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить grid-template-areas?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`grid-template-areas`** задає шаблон іменованих областей у CSS Grid, щоб розміщувати елементи не за координатами, а за іменами, наприклад через `grid-area: header`. **Ключове:** `grid-template-areas` дозволяє задавати макет словами, а не номерами рядків і колонок, роблячи сітку наочнішою.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`grid-template-areas` задає **шаблон іменованих областей** у CSS Grid, щоб розміщувати елементи в сітці не за координатами, а за **іменами**. Приклад: ```css .container { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 100px 1fr 80px; grid-template-areas: "header header" "sidebar main" "footer footer"; } ``` Тепер елемент можна розмістити так: ```css .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } ``` ## Правила і особливості - рядки описуються в лапках - кількість імен у кожному рядку повинна збігатися з кількістю колонок - крапки `.` позначають порожні комірки - одна й та сама область має бути **прямокутною** (не Г-подібною) **Підсумок:** `grid-template-areas` дозволяє задавати макет **словами**, а не номерами рядків і колонок, роблячи сітку наочнішою і зручнішою для читання.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.