Пошук уроків, статей та іншого контенту
Навчимося описувати іменовані області сітки та розкладати елементи через grid-template-areas.
grid-template-areas дає змогу описати структуру CSS Grid за допомогою текстової схеми. Кожен рядок у схемі відповідає рядку сітки, а кожне слово — іменованій області.
Наприклад:
grid-template-areas:
"header header"
"sidebar content"
"footer footer";Ця схема описує сітку з трьома рядками та двома стовпцями:
header займає всю верхню частину;
sidebar розташований ліворуч;
content розташований праворуч;
footer займає всю нижню частину.
Щоб елемент потрапив в область, потрібно вказати цю назву через grid-area.
.header {
grid-area: header;
}Назви областей довільні, але мають збігатися в grid-template-areas і grid-area.
Розглянемо макет сторінки з шапкою, бічною панеллю, основним вмістом і підвалом.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Areas</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: Arial, sans-serif;
background-color: #f1f5f9;
}
.page {
min-height: 100vh;
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
gap: 16px;
padding: 16px;
}
.header {
grid-area: header;
padding: 24px;
color: white;
background-color: #2563eb;
border-radius: 8px;
}
.sidebar {
grid-area: sidebar;
padding: 24px;
background-color: #dbeafe;
border-radius: 8px;
}
.content {
grid-area: content;
padding: 24px;
background-color: white;
border-radius: 8px;
}
.footer {
grid-area: footer;
display: grid;
place-items: center;
color: white;
background-color: #334155;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="page">
<header class="header">
<h1>Мій сайт</h1>
</header>
<aside class="sidebar">
<h2>Навігація</h2>
<p>Головна</p>
<p>Профіль</p>
<p>Налаштування</p>
</aside>
<main class="content">
<h2>Основний вміст</h2>
<p>
Цей блок розташований в області <code>content</code>.
</p>
</main>
<footer class="footer">
<p>© 2026 Мій сайт</p>
</footer>
</div>
</body>
</html>У цьому прикладі:
.page є Grid-контейнером.
grid-template-columns створює два стовпці.
grid-template-rows створює три рядки.
grid-template-areas задає логічну схему розташування.
Кожен дочірній елемент отримує відповідну область через grid-area.
grid-template-areasВластивість записують у вигляді набору рядків:
.container {
grid-template-areas:
"area-1 area-2"
"area-3 area-4";
}Назви, розділені пробілами, утворюють стовпці:
grid-template-areas:
"left right";У цьому випадку сітка має один рядок і два стовпці.
Окремі рядки, взяті в лапки, відповідають рядкам Grid:
grid-template-areas:
"header header"
"main aside"
"footer footer";Схематично це виглядає так:
┌────────┬────────┐
│ header │ header │
├────────┼────────┤
│ main │ aside │
├────────┼────────┤
│ footer │ footer │
└────────┴────────┘Кількість назв у кожному рядку має бути однаковою. Наприклад, такий запис некоректний:
grid-template-areas:
"header header"
"main";У першому рядку два стовпці, а в другому — лише один.
Якщо одна й та сама назва повторюється поруч, відповідні комірки об’єднуються в одну область.
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";Область content займає два стовпці, а header, sidebar і footer мають ширину на всю сітку.
Назва області повинна утворювати прямокутник. Такий варіант допустимий:
grid-template-areas:
"header header"
"content content";А такий — ні:
grid-template-areas:
"box box"
"box";Різна кількість комірок у рядках уже робить схему некоректною. Також область не може мати Г-подібну або іншу неправильну форму:
grid-template-areas:
"box box ."
"box . box";Назва box тут утворює не прямокутну область.
Для порожньої комірки використовують крапку (.):
grid-template-areas:
"header header header"
". content aside"
"footer footer footer";У результаті ліва комірка другого рядка залишиться порожньою:
┌────────┬─────────┬───────┐
│ header │ header │ header│
├────────┼─────────┼───────┤
│ │ content │ aside │
├────────┼─────────┼───────┤
│ footer │ footer │ footer│
└────────┴─────────┴───────┘Крапка не є назвою області, тому жоден елемент не можна розмістити в цій комірці через grid-area: ..
Для візуальної ясності можна записати кілька крапок через пробіл:
grid-template-areas:
"header header header"
". content ."
"footer footer footer";grid-template-areas описує розташування, але не задає розміри сітки. Для цього використовують grid-template-columns і grid-template-rows.
.layout {
display: grid;
grid-template-columns: 240px 1fr 300px;
grid-template-rows: 72px 1fr 56px;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}У цьому прикладі:
перший стовпець має ширину 240px;
другий стовпець займає весь доступний простір (1fr);
третій стовпець має ширину 300px;
перший рядок має висоту 72px;
середній рядок займає весь доступний простір;
останній рядок має висоту 56px.
Властивість gap додає проміжки між областями:
.layout {
gap: 20px;
}За потреби горизонтальний і вертикальний проміжки можна задати окремо:
.layout {
column-gap: 24px;
row-gap: 16px;
}Однією з переваг іменованих областей є можливість змінювати структуру макета в медіазапиті, не змінюючи HTML.
На широкому екрані бічна панель може бути ліворуч:
.layout {
display: grid;
grid-template-columns: 220px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}На вузькому екрані її можна розташувати над основним вмістом:
@media (max-width: 700px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}Кількість назв у рядках має відповідати кількості стовпців. Оскільки на вузькому екрані залишається один стовпець, кожен рядок містить лише одну назву.
Повний приклад адаптивного макета:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивний Grid Layout</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #e2e8f0;
}
.layout {
min-height: 100vh;
display: grid;
grid-template-columns: 220px 1fr;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 12px;
padding: 12px;
}
.header {
grid-area: header;
padding: 24px;
color: white;
background-color: #7c3aed;
}
.sidebar {
grid-area: sidebar;
padding: 24px;
background-color: #ddd6fe;
}
.main {
grid-area: main;
padding: 24px;
background-color: white;
}
.footer {
grid-area: footer;
display: grid;
place-items: center;
color: white;
background-color: #475569;
}
@media (max-width: 700px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}
</style>
</head>
<body>
<div class="layout">
<header class="header">
<h1>Каталог товарів</h1>
</header>
<aside class="sidebar">
<h2>Фільтри</h2>
<p>Категорія</p>
<p>Ціна</p>
</aside>
<main class="main">
<h2>Список товарів</h2>
<p>Тут відображаються товари каталогу.</p>
</main>
<footer class="footer">
<p>Інтернет-магазин</p>
</footer>
</div>
</body>
</html>На екрані шириною до 700px області розташуються вертикально:
header
sidebar
main
footerHTML при цьому залишається незмінним.
grid-area як назва областіКоли властивість grid-area отримує одне текстове значення, воно сприймається як назва області:
.header {
grid-area: header;
}Це відрізняється від запису з чотирма значеннями:
.item {
grid-area: 1 / 1 / 3 / 3;
}У цьому уроці для іменованих областей використовується саме назва області. Позиціонування через номери рядків і стовпців є іншим способом розміщення елементів.
Назву області можна призначити безпосередньо тегу:
header {
grid-area: header;
}
nav {
grid-area: sidebar;
}
main {
grid-area: content;
}
footer {
grid-area: footer;
}Проте класи зазвичай зручніші, оскільки не прив’язують стилі до конкретних HTML-тегів.
Під час створення макета з іменованими областями зручно діяти так:
Визначити основні частини сторінки.
Вибрати кількість стовпців і рядків.
Намалювати схему областей текстом.
Перевірити, що всі рядки мають однакову кількість комірок.
Призначити елементам відповідні значення grid-area.
Додати розміри рядків, стовпців і проміжки.
За потреби змінити схему в медіазапитах.
Наприклад:
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"top top"
"menu article"
"bottom bottom";
}
.top {
grid-area: top;
}
.menu {
grid-area: menu;
}
.article {
grid-area: article;
}
.bottom {
grid-area: bottom;
}Назви top, menu, article і bottom не мають спеціального значення. Важливо лише, щоб вони були однаковими в обох місцях.
Якщо в схемі вказано main, а елементу призначено content, елемент не потрапить у потрібну іменовану область.
.layout {
grid-template-areas:
"header main";
}
.content {
grid-area: content;
}Назви мають збігатися:
.layout {
grid-template-areas:
"header content";
}
.content {
grid-area: content;
}Кожен рядок схеми повинен мати однакову кількість назв:
/* Неправильно */
grid-template-areas:
"header header"
"main"
"footer footer";Правильний варіант:
grid-template-areas:
"header header"
"main main"
"footer footer";Одна назва повинна утворювати прямокутну область:
/* Неправильно */
grid-template-areas:
"box box ."
"box . ."
". box box";Назва box займає комірки, які не утворюють один прямокутник.
Крапка позначає порожню комірку:
grid-template-areas:
"header header"
". content";Не потрібно створювати елемент із таким призначенням:
.empty {
grid-area: .;
}Крапка не є доступною назвою області.
display: gridgrid-template-areas працює лише для Grid-контейнера:
.layout {
display: grid;
grid-template-areas:
"header header"
"main main";
}Якщо display: grid не задано, дочірні елементи не будуть розкладатися за описаною схемою.
grid-template-areas описує структуру Grid-сітки текстовою схемою.
Кожен рядок у схемі відповідає рядку сітки.
Назви через пробіл відповідають стовпцям.
Однакова назва може займати кілька сусідніх комірок.
Область повинна мати прямокутну форму.
Крапка (.) позначає порожню комірку.
Елемент підключається до області через grid-area.
grid-template-columns і grid-template-rows задають розміри сітки.
У медіазапитах можна змінювати схему областей, не змінюючи HTML.