grid template areas
Grid layout
Именованные сегменты сеткиgrid-template-areas
grid-area
1Создадим сетку с именованными областями в контейнере body, используя атрибут grid-template-areas:
body {
margin: 0;
font-family: Arial;
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 25vw 1fr;
grid-template-rows: 10vh 1fr 10vh ;
grid-template-areas: "head head"
"nav main"
"nav foot";
}Сетка состоит из 2-х колонок и 3-х строк
С помощью атрибута grid-template-areas мы создали именованные области ( сегменты ) сетки
Каждой ячейке сетки мы поставили в соответствие имя области, которой эта ячейка будет принадлежать
Область может иметь только прямоугольную форму
| Строка | Колонка | |
|---|---|---|
| 1 | 2 | |
| 1 | head | head |
| 2 | nav | main |
| 3 | nav | foot |
Обе ячейки 1-ой строки будет занимать элемент, у которого атрибут grid-area будет иметь значение head
Пусть это будет элемент head
header {
grid-area: head;
background-color: #057;
color: #dde;
}Первые ячейки 2-ой и 3-ей строки будет занимать элемент, у которого атрибут grid-area будет иметь значение nav
Вторую ячейку 2-ой строки будет занимать элемент, у которого атрибут grid-area будет иметь значение main
Вторую ячейку 3-ей строки будет занимать элемент, у которого атрибут grid-area будет иметь значение foot
Определим стиль элемента header:
Обратите внимание, что мы установили значение head для атрибута grid-area
Аналогично создадим стиль элемента
nav {
grid-area: nav;
background-color: #444444;
color: white;
}main {
grid-area: main;
background-color: #dde;
}footer {
grid-area: foot;
background-color: #057;
color: #dde;
}body {
margin: 0;
font-family: Arial;
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 25vw 1fr;
grid-template-rows: 10vh 1fr 10vh ;
grid-template-areas: "head head"
"nav main"
"nav foot";
}
header, nav, main, footer {
padding: 0.5rem 1rem;
}
header {
grid-area: head;
background-color: #057;
color: #dde;
}
nav {
grid-area: nav;
background-color: #444444;
color: white;
}
main {
grid-area: main;
background-color: #dde;
}
footer {
grid-area: foot;
background-color: #057;
color: #dde;
}
h1, h2, h3 {
margin: 2vh 3vh;
}
@media screen and (max-width: 600px) {
body {
grid-template-areas: "head"
"nav"
"main"
"foot";
grid-template-rows: 10vh 8vh 1fr 10vh ;
grid-template-columns: 100vw;
}
}
@media screen and (max-height: 480px) {
body {
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 15vh 70vh 15vh ;
grid-template-columns: 25vw 75vw;
}
}
@media screen and (max-height: 480px), (max-width: 600px) {
h1, h2, h3 { margin: 1vh 2vw; }
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1rem;
}
}<body>
<header>
<h2>Header</h2>
</header>
<nav>
<h3>Navigation</h3>
</nav>
<main>
<h3>Main</h3>
</main>
<footer>
<h3>Footer</h3>
</footer>
</body>
Всемирная паутина
Пример
Flexbox Froggy
