Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке «grid area»?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`grid-area`** - властивість, яка задає область розміщення елемента в CSS Grid (у яких рядках і колонках він перебуватиме), координатним способом або через ім'я з `grid-template-areas`. **Ключове:** `grid-area` - це позиція і розмір елемента в координатах сітки або ім'я області з `grid-template-areas`; Flexbox так не вміє.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`grid-area` - це властивість, яка задає **область розміщення елемента в CSS Grid**, тобто в яких **рядках і колонках** він буде перебувати. Вона може працювати **двома способами**: --- ### **1. Координатний спосіб (через лінії сітки)** ```css .item { grid-area: 1 / 2 / 3 / 4; } ``` Формат: ```javascript grid-area: row-start / column-start / row-end / column-end; ``` Тобто елемент почнеться на **1-му рядку**, **2-й колонці**, і розтягнеться до **3-го рядка** і **4-ї колонки**. --- ### **2. Іменований спосіб (через** `grid-template-areas`**)** У контейнері: ```css .container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; } ``` В елементі: ```css .header { grid-area: header; } ``` Тут `grid-area` просто посилається на ім'я області, заданої в макеті. --- ### **Головна ідея** `grid-area` - це **позиція + розмір елемента в координатах сітки**, або **ім'я області**, якщо використовується шаблон `grid-template-areas`. **Flexbox так не вміє**, це одна з ключових відмінностей Grid.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.