Области грида
Здравствуйте! В этом уроке мы рассмотрим такое понятие как области в Grid Layout. Эти области мы можем задавать c помощью вертикальных и горизонтальных линий, которые и будут задавать границу этой области. Области могут включать несколько ячеек грида и особенно полезны при определении семантических отношений между элементами на странице.
Области grid-контейнера
Для того чтобы определить области у grid-контейнера используется свойство grid-template-areas. Давайте рассмотрим на примере:
<!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 header"
"sidebar content"
"sidebar content";
grid-template-columns: 250px 1fr;
grid-template-rows: 200px 1fr 100px;
}
.header { grid-area: header; background-color: #eee; }
.sidebar { grid-area: sidebar; background-color: #aaa; }
.content { grid-area: content; background-color: #bbb; }
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
</body>
</html>
В римере у грида назначаются 2 столбца и 3 строки:
grid-template-columns: 150px 1fr; grid-template-rows: 100px 1fr 100px;
В конечном итоге у в гриде будет 3 х 2 = 6 ячеек. Но поскольку в разметке страницы есть 3 элемента с такими областями: header, sidebar, content. То свойство grid-template-areas и позволяет установить, как эти самые области должны располагаться на странице:
grid-template-areas: "header header" "sidebar content" "sidebar content";
Такое выражение как «header header» может указывать, что область header будет занимает 2 ячейки подряд.
А вот следующее выражение «sidebar content» уже будет указывать на 2-ую строку, где область sidebar занимает 1-ую ячейку, а content — 2-ую ячейку.
Для того, чтобы установить области у элементов надо задать свойство grid-area:
.header {
grid-area: header; /* элемент с классом header помещается в область header*/
background-color: #bbb;
}
А теперь рассмотрим более сложный пример.
<!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 header header header header"
". . . . ."
"menu . content . sidebar"
". . . . ."
"footer footer footer footer footer";
grid-template-columns: 140px 5px 1fr 5px 130px;
grid-template-rows: 100px 5px 1fr 5px 90px;
}
.header { grid-area: header; background-color: orange; }
.menu { grid-area: menu; background-color: red; }
.sidebar { grid-area: sidebar; background-color: green; }
.content { grid-area: content; background-color: blue; }
.footer { grid-area: footer; background-color: tomato; }
</style>
</head>
<body>
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="menu"></div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>
</body>
</html>
Теперь уже грид содержит 5 строк и 5 столбцов, что равняется 5х5=25 ячеек, которые соответственно размещаются в 5 областях: header, menu, sidebar, content и footer.
Свойство header содержит также и запись «…..» это так называемое пустое пространство, которое не будет не принадлежать ни к одной области и нужно для задания пустых отступов между областями.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
admin administrator
Об авторе