Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

CSS: Grid Layout in alternativa a FlexBox

Link copiato negli appunti

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

Ti consigliamo anche