Capitolul 6: Grid LayoutAliniere și spațiere
Atunci când folosim dimensiuni fixe într-un template, se poate întâmpla ca elementele să nu acopere toate dimensiunile părintelui. De aceea, câteodată vom avea nevoie de proprietăți de aliniere.
Unele proprietăți de aliniere și spațiere sunt aceleași ca la flex.
Gap
La fel ca la flex, putem folosi proprietatea gap pentru a seta distanța dintre elementele unui grid.
Dacă vrem control mai granular, putem să folosim proprietățile row-gap și column-gap.
Align Content și Justify Content
Am mai văzut proprietățile align-content și justify-content la flex. Le putem folosi și la grid pentru a alinia toate rândurile, respectiv coloanele.
align-content
Valorile sunt aceleași ca la flex, cu două excepții notabile: nu are sens să folosim flex-start și flex-end. Dar putem folosi start și end, care sunt compatibile și cu sistemele de scriere de la dreapta spre stânga (RTL).
justify-content
Align items și Justify Items
Pentru a alinia elementele de pe un rând, în relație cu celelalte elemente de pe același rând, folosim proprietatea align-items, ca la flex.
În mod similar, există justify-items care aliniază elementele de pe o coloană față de alte elemente de pe acea coloană.
align-items
justify-items
Order sau Z-Index
Faptul că putem aranja elementele cum vrem într-un grid poate însemna că uneori anumite elemente pot fi peste altele. Dacă nu îi facem nimic, elementele care apar mai târziu în codul HTML vor fi afișate deasupra.
Dar putem controla ce elemente apar deasupra folosind proprietatea order, pe care am văzut-o la flex, dar și z-index.
Deși au același efect în Grid Layout, ele au semnificații diferite. order doar reordonează elementele, iar z-index chiar le pune unul peste altul.
O valoare mai mare pentru z-index înseamnă că este mai aproape de privitor.
Dacă nu setăm nimic, toate elementele au z-index: 0. Cele cu z-index: 1 apar deasupra și tot așa.
Putem folosi și valori negative, z-index: -1, iar aceste elemente vor apărea sub altele. Pot fi vizibile dacă sunt sub elemente transparente, dar nu vom putea interacționa cu ele.
Când mai multe elemente surori au același z-index, și același order, cele aflate mai târziu în cod vor fi puse deasupra.