grid template areas
Grid layout
grid-template-areas
1Для начала создадим сетку с именованными областями:
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-х строк
Обе колонки 1-ой строки будет занимать элемент, у которого атрибут grid-area будет иметь значение head
Певые колонки 2-ой и 3-ей строки будет занимать элемент, у которого атрибут grid-area будет иметь значение nav
Вторую колонку 2-ой строки будет занимать элемент, у которого атрибут grid-area будет иметь значение main
Вторую колонку 3-ей строки будет занимать элемент, у которого атрибут grid-area будет иметь значение foot
| Строка | Колонка | grid-area |
|---|---|---|
| 1 | 1 | head |
| 1 | 2 | head |
| 2 | 1 | nav |
| 2 | 2 | main |
| 3 | 1 | nav |
| 3 | 2 | foot |
| Строка | Колонка | |
|---|---|---|
| 1 | 2 | |
| 1 | head | head |
| 2 | nav | main |
| 3 | nav | foot |
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
