Що робить grid-template-areas?
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 дозволяє задавати макет словами, а не номерами рядків і колонок, роблячи сітку наочнішою і зручнішою для читання.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.