Здравствуйте! В этом завершающем уроке по верстке на грид мне хотелось бы рассмотреть создание простейшего макета страницы с помощью 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 строк.
Об авторе