Макет страницы в 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;
}
.grid-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;
}
.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) {
.grid-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="grid-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>
В прошлой теме уже рассматривалось применение именованных областей. И здесь они также используются, так как очень удобно связывать стили с семантикой страницы через области.
Однако, так как предполагается, что веб-страницу могут просматривать на мобильных устройствах, где ширина экрана ограничена, то хотелось бы иметь адаптивный макет. Поэтому в стиля имеются два разных определения грида. Одно определение грида для мобильных устройств (условно в качестве ширины устройств выбрано значение в 468px
):
.grid-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;
}
В таком состоянии грид имеет только один столбец и 5 строк для каждой области плюс 4 строки-разделители.
При увеличении ширины экрана в действие вступает другое определение грида:
.grid-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;
}
В этом случае столбцов и строк будет по пять: