Layout-ul unei pagini în Grid Layout
Să analizăm crearea unui layout standard adaptiv simplu pentru o pagină web, care constă dintr-un antet (header), subsol (footer), conținut principal, bloc de navigare (menu) și sidebar. Pentru aceasta, definim următoarea pagină web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Grid Layout în 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>În tema anterioară, am discutat despre utilizarea zonelor denumite. Aici, ele sunt de asemenea folosite, deoarece este foarte convenabil să asociezi stilurile cu semantica paginii prin zone.
Totuși, având în vedere că pagina web ar putea fi vizualizată pe dispozitive mobile, unde lățimea ecranului este limitată, dorim să avem un layout adaptiv. Prin urmare, în stiluri avem două definiții diferite ale gridului. O definiție pentru dispozitive mobile (cu o lățime de ecran de până la 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;
}În această stare, gridul are doar o singură coloană și 5 rânduri pentru fiecare zonă plus 4 rânduri separatoare.
La creșterea lățimii ecranului, intră în vigoare o altă definiție a gridului:
.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;
}În acest caz, vor fi cinci coloane și cinci rânduri:
