Il Grid Layout di CSS è un layout model che consente di tenere sotto controllo la dimensione e il posizionamento di elementi box così come del loro contenuto; tecnicamente Grid Layout si differenzia da Flexible Box Layout (o più semplicemente FlexBox) perché quest'ultimo è orientato su un singolo asse, mentre il primo è stato concepito per layout bidimensionali e tutti gli allineamenti tengono conto di entrambe le dimensioni.
Grid Layout rappresenta una soluzione alternativa rispetto a FlexBox e diversi layout possono essere definiti privilegiando uno di questi due approcci ottenendo il medesimo risultato; dal punto di vista dei progetti basati sui layout grid-based entrambi i due moduli presentano dei costrutti simili, ma Grid Layout offre interessanti opportunità per esplicitare la collocazione degli elementi in una griglia e consente di apportare modifiche sostanziali alla struttura di un layout senza richiedere cambiamenti rilevati a livello di markup.
Sostanzialmente Grid Layout prevede la realizzazione di una griglia formata da un contenitore principale (o Grid Container), da definire tramite display: grid, e da dei componenti figli ("children" detti Grid Items); lo sviluppatore può organizzare il posizionamento e l'ordine di questi ultimi indipendentemente dalla loro collocazione nel markup di pagina. Associando tale caratteristica all'utilizzo delle media query i layout risulteranno facilmente adattabili a qualsiasi display tenendo conto delle differenze relative a form factor, spazio disponibile nell'aerea di visualizzazione e orientamento.
Un semplice progetto basato su Grid Layout potrebbe partire dalla definizione di alcune aree per una pagina dotata di header, footer, due colonne laterali e una centrale con contenuto principale al centro:
.hg__header { grid-area: header; }
.hg__footer { grid-area: footer; }
.hg__main { grid-area: main; }
.hg__left { grid-area: navigation; }
.hg__right { grid-area: ads; }a questo punto è possibile inizializzare il contenitore principale e definire la posizione dei componenti figli:
.hg {
display: grid;
grid-template-areas: "header header header"
"navigation main ads"
"footer footer footer";
grid-template-columns: 150px 1fr 150px;
grid-template-rows: 100px
1fr
30px;
min-height: 100vh;
}Da notare che Grid Layout introduce una nuova unità di misura, fr, attraverso la quale è possibile rappresentare una frazione dello spazio lasciato libero nel contenitore principale; fr consente in pratica di distribuire i componenti figli a seconda dello spazio disponibile nel Grid Container.
Per approfondire Bitsofco
