Ce face display: grid
display: grid activează cel mai puternic sistem de așezare în pagină din CSS. Spre deosebire de Flexbox (care gândește într-o singură direcție la un moment dat – fie linie, fie coloană), Grid gândește bidimensional: pe linii și coloane simultan.
Permite crearea de structuri complexe de pagină, galerii foto perfect aliniate și tablouri de bord (dashboards) cu un volum redus de cod CSS.
Valori uzuale
| Valoare | Descriere |
|---|---|
grid |
Activează containerul grilă la nivel de bloc. |
inline-grid |
Activează containerul grilă la nivel inline. |
Exemple
Exemplul 1: Activarea unei grile simple cu două coloane
Elementele din interior se așază automat în cele două coloane.
.grila-simpla {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}Efect vizual în browser
Elementele copil sunt împărțite ordonat în două coloane egale de câte 50% din lățime.Greșeli frecvente
- Folosirea Grid pentru alinierea a 2 elemente pe o singură linie (cum ar fi o iconiță și un text); pentru alinieri simple unidimensionale, Flexbox este mai rapid și mai potrivit.
Comenzi înrudite
grid-template-columns și rows (unitatea fr, repeat, minmax): Definește numărul și lățimea coloanelor, respectiv înălțimea rândurilor dintr-un container grilă.grid-column și grid-row (span): Stabilește poziția și întinderea unui element copil peste una sau mai multe coloane sau rânduri ale grilei.gap (row-gap, column-gap): Setează distanța dintre elementele copil dintr-un container Flexbox sau Grid, fără a adăuga spațiu la margini.