Ente accreditato Regione Veneto n.4271

CSS grid layout – Tutorial #1

Introduzione all’utilizzo del display grid CSS - Prima parte

Pubblicato da Simone Baldassin // 10 gennaio 2018 // 415 visualizzazioni

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

displaygrid

CSS

displaygrid

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

displaygrid

Ordinamento differente degli elementi

HTML

displaygrid

CSS

displaygrid

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

displaygrid

Elementi mancanti

HTML

displaygrid

CSS

displaygrid

Come vediamo dalle figure è possibile gestire griglie un pò particolari con elementi mancanti; il risultato che andiamo a ottenere è il seguente

displaygrid

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

Topic: , ,

Send this to a friend