Zonele grid
În cadrul unui grid, putem defini zone (grid area). Zonele sunt definite prin două linii grid verticale și două linii grid orizontale, care determină spațiul ocupat de zonă. O zonă nu este echivalentă cu o singură celulă a gridului și poate include mai multe celule. Zonele sunt deosebit de utile pentru a defini relații semantice între diferite părți ale layout-ului paginii.
Pentru a defini zonele în containerul grid, se folosește proprietatea grid-template-areas. De exemplu, să definim trei zone:
<!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 header"
"sidebar content"
"sidebar content";
grid-template-columns: 150px 1fr;
grid-template-rows: 100px 1fr 100px;
}
.header { grid-area: header; background-color: #bbb; }
.sidebar { grid-area: sidebar; background-color: #ccc; }
.content { grid-area: content; background-color: #eee; }
</style>
</head>
<body>
<div class="grid-container">
<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
</div>
</body>
</html>Aici, containerul grid are două coloane și trei rânduri definite:
grid-template-columns: 150px 1fr;
grid-template-rows: 100px 1fr 100px;Astfel, în grid vom avea 3 x 2 = 6 celule. Dar în marcajul paginii sunt definite trei elemente cu zone denumite: header, sidebar, content. Proprietatea grid-template-areas stabilește modul în care aceste zone sunt poziționate în celulele gridului:
grid-template-areas: "header header"
"sidebar content"
"sidebar content";Expresia "header header" reprezintă primul rând și indică faptul că zona header ocupă două celule consecutive.
Următoarea expresie "sidebar content" se referă la al doilea rând, unde zona sidebar ocupă prima celulă, iar content a doua celulă. Al treilea rând repetă al doilea. Deci, dacă ne uităm la celule, rezultatul va fi următorul:
Pentru a seta zona unui element, se folosește proprietatea grid-area:
.header {
grid-area: header; /* elementul cu clasa header este plasat în zona header */
background-color: #bbb;
}În final, vom obține următoarea pagină:
Acum să luăm în considerare un alt exemplu mai complex. Să presupunem că codul paginii web arată astfel:
<!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 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;
}
.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; }
</style>
</head>
<body>
<div class="grid-container">
<div class="header"></div>
<div class="content"></div>
<div class="menu"></div>
<div class="sidebar"></div>
<div class="footer"></div>
</div>
</body>
</html>Acum gridul conține 5 rânduri și 5 coloane, adică în total 25 de celule, care cuprind 5 zone: header, menu, sidebar, content și footer.
Proprietatea grid-template-areas din stilurile containerului grid conține din nou definiția modului în care toate aceste zone sunt alocate celulelor. De exemplu, elementul header trebuie să ocupe toate cele cinci celule din primul rând: "header header header header header".
Dar definiția celui de-al doilea rând, care are o înălțime de 5px, arată deja neobișnuit: ". . . . .". Punctul înseamnă că acea celulă nu va aparține niciunei zone și va rămâne necompletată. Dacă trebuie să lăsăm 5 celule necompletate, se indică cinci puncte, separate prin spații. În final, vom obține cinci zone, între care vor fi spații necompletate.
