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 rintracciabile nell’aerea di composizione dell’interfaccia 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 stazione 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 rintracciabile nel Grid Container.
Per approfondire Bitsofco