Как сделать макет страницы на Grid Layout
Здравствуйте! В этом завершающем уроке по верстке на грид мне хотелось бы рассмотреть создание простейшего макета страницы с помощью Grid Layout. Наш макет будет состоять из шапки, футера или подвала, области контента, панели навигации и боковой панели или сайдбара.
Давайте создадим вот такую страницу.
Создание макета страницы на Grid Layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Создание макета страницы в Grid Layout в CSS3</title>
<style>
*{
box-sizing: border-box;
}
html, body{
margin:0;
padding:0;
}
.container {
height:100vh;
display: grid;
grid-template-areas: "header"
"."
"menu"
"."
"content"
"."
"sidebar"
"."
"footer";
grid-template-columns: 1,2fr;
grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
}
.header { grid-area: header; background-color: #bbb; }
.menu { grid-area: menu; background-color: #ccc; }
.sidebar { grid-area: sidebar; background-color: #ccc; }
.content { grid-area: content; background-color: #eee; }
.footer { grid-area: footer; background-color: #bbb; }
h3{
text-align:center;
}
@media screen and (min-width: 468px) {
.container {
height:100vh;
display: grid;
grid-template-areas: "header header header header header"
". . . . ."
"menu . content . sidebar"
". . . . ."
"footer footer footer footer footer";
grid-template-columns: 130px 5px 1fr 5px 130px;
grid-template-rows: 90px 5px 1fr 5px 90px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header"><h3>Header</h3></div>
<div class="content"><h3>Content</h3></div>
<div class="menu"><h3>Menu</h3></div>
<div class="sidebar"><h3>Sidebar</h3></div>
<div class="footer"><h3>Footer</h3></div>
</div>
</body>
</html>
В одном из прошлых уроков я уже поднимал тему именованных областей в грид. И в этом примере также применяются именованные области, поскольку очень удобно получается связывать стили с семантическими элементами станицы.
Но поскольку, сайты сейчас просматривают также и на мобильных устройствах, ширина которых меньше десктопов желательно иметь и адаптивный макет, который бы хорошо смотрелся и на мобильных устройствах. Для этого в стилях есть 2 разных определения grid. Одно для мобильных устройств ширина экрана, которых меньше 468px:
.container {
height:100vh;
display: grid;
grid-template-areas: "header"
"."
"menu"
"."
"content"
"."
"sidebar"
"."
"footer";
grid-template-columns: 1fr;
grid-template-rows: 80px 5px 80px 5px 1fr 5px 80px 5px 80px;
}
А вот при увеличении ширины экрана в будет действовать другое определение грида:
.container {
height:100vh;
display: grid;
grid-template-areas: "header header header header header"
". . . . ."
"menu . content . sidebar"
". . . . ."
"footer footer footer footer footer";
grid-template-columns: 130px 5px 1fr 5px 130px;
grid-template-rows: 90px 5px 1fr 5px 90px;
}
Как видно из примера сетка состоит из 5 столбцов и 5 строк.
admin administrator
Об авторе