Poziționarea elementelor
Grid-ul reprezintă un set de celule care se formează la intersecția coloanelor și rândurilor. Dar rândurile și coloanele în sine sunt create cu ajutorul liniilor grid, care împart grid-ul pe verticală și orizontală.
Implicit, fiecare element în grid este poziționat într-o singură celulă în ordine. Dar putem configura mai precis poziționarea elementului în grid folosind o serie de proprietăți:
- grid-row-start: setează linia grid orizontală de început de la care începe elementul
- grid-row-end: indică până la ce linie grid orizontală trebuie să se întindă elementul
- grid-column-start: setează linia grid verticală de început de la care începe elementul
- grid-column-end: indică până la ce linie grid verticală trebuie să se întindă elementul
De exemplu, să întindem un element pe mai multe coloane:
<!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-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 5em);
}
.special-item {
grid-column-start: 2;
grid-column-end: 5;
}
.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;}
.color5 {background-color: #4e342e;}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item color1">Grid Item 1</div>
<div class="grid-item color2 special-item">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 color5">Grid Item 5</div>
<div class="grid-item color1">Grid Item 6</div>
<div class="grid-item color4">Grid Item 7</div>
</div>
</body>
</html>
Aici sunt definite patru coloane, iar celui de-al doilea element i s-a atribuit clasa specială special-item, care începe de la linia grid 2 sau coloana 2 (grid-column-start: 2) până la linia grid verticală 5 (grid-column-end: 5).
Al doilea element nu trebuie să înceapă neapărat de la a doua coloană, acesta poate începe de la orice altă coloană, de exemplu de la coloana 1 sau 3. Dacă poziționăm al doilea element de la coloana 3, se va forma un gol la coloana 2:
.special-item {
grid-column-start: 3;
grid-column-end: 5;
}
Dacă setăm pentru al doilea element să înceapă de la prima coloană, acesta va fi mutat pe următorul rând și va începe de la prima coloană.
În loc să folosim două proprietăți separate, putem folosi o singură proprietate - grid-column, care primește valorile grid-column-start și grid-column-end separate printr-o bară oblică:
grid-column: grid-column-start / grid-column-end;De exemplu, putem scurta stilul clasei special-item astfel:
.special-item {
grid-column: 3 / 5;
}În mod similar, folosind proprietățile grid-row-start și grid-row-end, putem seta poziționarea elementului pe mai multe rânduri. Să modificăm clasa special-item astfel:
.special-item {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}În acest caz, al doilea element este poziționat în a doua coloană a primului rând și se întinde până la al treilea rând.
În loc să folosim două proprietăți separate grid-row-start și grid-row-end, putem folosi o singură proprietate grid-row:
grid-row: grid-row-start / grid-row-end;Astfel, putem modifica stilul special-item astfel:
.special-item {
grid-column-start: 2;
grid-row: 1 / 3;
}span
Folosind cuvântul special span, putem întinde un element pe mai multe celule. După cuvântul span se indică numărul de celule pe care trebuie să se întindă elementul:
.special-item {
grid-row: 1 / span 2;
grid-column: 2 / span 2;
}Elementul este plasat în celula situată la intersecția primului rând și a celei de-a doua coloane și se întinde pe două rânduri în jos și pe două coloane în dreapta.
grid-area
Proprietatea grid-area combină proprietățile grid-column și grid-row, permițându-ne să le scurtăm:
grid-area: row-start / column-start / row-end / column-end;De exemplu, să modificăm stilurile clasei special-item:
.special-item {
grid-area: 1 / 2 / 3 / 4;
}