Здравствуйте! В этом уроке мы рассмотрим такое понятие как области в Grid Layout. Эти области мы можем задавать c помощью вертикальных и горизонтальных линий, которые и будут задавать границу этой области. Области могут включать несколько ячеек грида и особенно полезны при определении семантических отношений между элементами на странице.
Для того чтобы определить области у 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 содержит также и запись «…..» это так называемое пустое пространство, которое не будет не принадлежать ни к одной области и нужно для задания пустых отступов между областями.
Об авторе