Ce este Grid Layout - Container Grid
Grid Layout reprezintă un modul special CSS3 care permite poziționarea elementelor sub formă de grilă sau tabel. La fel ca Flexbox, Grid Layout oferă o abordare flexibilă pentru aranjarea elementelor, numai că dacă flexbox plasează elementele încorporate într-o singură direcție - orizontal sub formă de coloane sau vertical sub formă de rânduri - Grid poziționează elementele simultan în două direcții - sub formă de rânduri și coloane, formând astfel o grilă.
Suportul browserelor
La utilizarea Grid Layout, trebuie să ținem cont că doar relativ recent producătorii de browsere au început să implementeze suportul acestui modul în browserele lor. Mai jos este o listă a versiunilor de browsere de la care a fost implementat suportul complet pentru Grid Layout:
- Google Chrome - de la versiunea 57
- Mozilla Firefox - de la versiunea 52
- Opera - de la versiunea 44
- Safari - de la versiunea 10.1
- iOS Safari - de la versiunea 10.3
După cum se poate observa, majoritatea acestor versiuni de browsere au fost lansate la începutul anului 2017. Deci, nu ne putem baza pe versiunile mai vechi ale acestor browsere.
În plus, IE (începând cu versiunea 10) și Microsoft Edge au doar suport parțial pentru modul. Iar Android Browser, Opera Mini, UC Browser nu au deloc suport.
Crearea unui container grid
Baza pentru definirea aranjamentului Grid Layout este grid container, în interiorul căruia sunt plasate elementele. Pentru a crea un container grid, trebuie să atribuim proprietății sale de stil display una dintre cele două valori: grid sau inline-grid.
Vom crea o pagină web simplă care utilizează Grid Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Grid Layout în CSS3</title>
<style>
.grid-container {
border: solid 2px #000;
display: grid;
}
.grid-item {
text-align: center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
.color4 {background-color: #2A9FBC;}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item color1">Grid Item 1</div>
<div class="grid-item color2">Grid Item 2</div>
<div class="grid-item color3">Grid Item 3</div>
<div class="grid-item color4">Grid Item 4</div>
<div class="grid-item color1">Grid Item 5</div>
</div>
</body>
</html>Pentru containerul grid-container a fost setată proprietatea display:grid. În interiorul său sunt plasate cinci grid-elemente.
Dacă valoarea grid definește containerul ca element bloc, valoarea inline-grid definește elementul ca element în linie:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Grid Layout în CSS3</title>
<style>
.grid-container {
border: solid 2px #000;
display: inline-grid;
}
.grid-item {
box-sizing: border-box;
text-align: center;
font-size: 1.1em;
padding: 1.5em;
color: white;
}
.color1 {background-color: #675BA7;}
.color2 {background-color: #9BC850;}
.color3 {background-color: #A62E5C;}
.color4 {background-color: #2A9FBC;}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item color1">Grid Item 1</div>
<div class="grid-item color2">Grid Item 2</div>
<div class="grid-item color3">Grid Item 3</div>
<div class="grid-item color4">Grid Item 4</div>
<div class="grid-item color1">Grid Item 5</div>
</div>
</body>
</html>În acest caz, întreaga grilă ocupă doar spațiul necesar pentru a găzdui elementele sale.
