Anno nuovo, grid system nuovo mi verrebbe da dire se non fosse che CSS grid è già in circolazione da un pò, anzi, per essere precisi, nasce in seguito alle direzioni prese con Flexbox; ma attenzione, il display grid, e tutte le regole che lo compongono, non nasce come alternativa al display flex ma bensì come un valore in più, un qualcosa che vada ad ampliare le possibilità offerte da quest’ultimo.
Il grid layout non gode però di una buona retro compatibilità, pur essendo supportato da tutti i browser di nuova generazione perde qualche colpo sugli stessi in versione mobile e non va oltre la versione 11 di Internet Explorer (l’ultima prima del decesso per chi non ne fosse al corrente).
In questo primo approccio vediamo come creare delle griglie basilari sfruttando il solito principio di righe, colonne e celle già visto in precedenti articoli, approfondiremo l’argomento nei prossimi mesi.
CSS grid con layout di esempio di default
HTML
CSS
Come possiamo vedere nelle figure il div class grid-layout assume il valore display: grid; mentre gli altri 2 attributi si occupano di:
grid-template-columns (definisce il numero di colonne su cui distribuire la griglia)
grid-template-rows (definisce il numero di righe su cui distribuire la griglia
Ordinamento differente degli elementi
HTML
CSS
In questo caso vediamo come sia possibile, utilizzando gli attributi grid-column e grid-row, assegnare un ordinamento differente agli elementi sempre in relazione alle dichiarazioni del grid-layout che li contiene
Elementi mancanti
HTML
CSS
Come vediamo dalle figure è possibile gestire griglie un pò particolari con elementi mancanti; il risultato che andiamo a ottenere è il seguente
Naturalmente la struttura è completamente responsive e questi sono solamente degli esempi base delle possibilità messe a disposizione dal display grid, nei prossimi mesi andremo ad approfondire l’argomento.
Prima di utilizzarlo nei nostri progetti ricordiamo sempre di dare una sbirciata al supporto aggiornato dei browser a questo indirizzo.
See you
Ancora nessun commento