Свойство grid-template-areas
Определяет области внутри контейнера grid сетки. На эти области затем можно ссылаться при размещении элементов grid сетки.
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";Пошаговый план! Как быстро научиться создавать сайты!
- поддерживается начиная с
- частичная поддержка до
- не поддерживается
Значения
grid-template-areas: none;
Без определения областей grid сетки
<div class="grid-1">
<div class="grid-1-col bg-green">Header</div>
<div class="grid-1-col bg-red">Sidebar</div>
<div class="grid-1-col bg-green">Main</div>
<div class="grid-1-col bg-red">Footer</div>
</div>
<style>
.grid-1 {
display: grid;
grid-template-areas: none;
}
.grid-1-col {
padding: 1rem;
border: 1px solid white;
}
</style>Header
Sidebar
Main
Footer
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
Вы можете использовать имена областей, чтобы указать, какие ячейки должен занимать каждый элемент grid сетки. Элементам grid сетки присваиваем название области используя свойство grid-area
<div class="grid-2">
<div class="grid-2-col grid-2-header bg-green">Header</div>
<div class="grid-2-col grid-2-sidebar bg-red">Sidebar</div>
<div class="grid-2-col grid-2-main bg-green">Main</div>
<div class="grid-2-col grid-2-footer bg-green">Footer</div>
</div>
<style>
.grid-2 {
display: grid;
grid-template-areas: "header header header" "sidebar main main" "footer footer footer";
}
.grid-2-col {
padding: 1rem;
border: 1px solid white;
}
.grid-2-header {
grid-area: header;
}
.grid-2-sidebar {
grid-area: sidebar;
}
.grid-2-main {
grid-area: main;
}
.grid-2-footer {
grid-area: footer;
}
</style>Header
Main