CSS Grid è il primo layout realmente creato per il web. È stato progettato per organizzare il contenuto sia in colonne che in righe, offrendo agli sviluppatori un controllo dei siti web mai avuto prima.
Nella pagina di Mozilla dedicata al Grid Inspector si legge a proposito di questo layout:
It’s a layout framework — without the framework.
CSS Grid è infatti il più potente layout disponibile ora in CSS che mette gli sviluppatori di fronte ad una nuova era del web design.
La verità è che il linguaggio CSS, costruito nella metà degli anni ’90 quando i siti web erano molto più semplici, non è stato creato per costruire strutture complesse. Finora gli sviluppatori hanno dovuto trovare degli hacks, ovvero delle soluzioni, spesso anche poco eleganti, a causa del limite imposto dal CSS.
Grazie a CSS Grid possiamo scordarci decenni di hacks usati per il posizionamento degli elementi in una pagina web e dedicare tutte le energie alla creazione di layout complessi in modo molto più semplice e sostenibile nel tempo.
Un altro aspetto positivo è che CSS Grid non rimpiazza le proprietà utilissime di flexbox, ma viene usato insieme ad esse. Questa possibilità di unire un layout a una dimensione (flexbox) a un layout a due dimensioni (grid) è ciò che rende CSS Grid così potente.
Qui un esempio dell’uso di Grid + Flexbox
Le principali caratteristiche di CSS Grid
-
- Fixed or flexible: possiamo creare una griglia composta da pezzi con misure fisse o flessibili e possiamo usare le percentuali o l’unità di misura frazionale fr-unit.
- Place and align: possiamo posizionare gli elementi in punti precisi della griglia indipendentemente dal loro ordine nella struttura HTML. Inoltre è facilissimo decidere l’allineamento di un oggetto all’interno di una grid area (anche verticale finalmente!!).
- Span and overlap: un oggetto può occupare più celle della griglia e anche sovrapporsi ad uno o più oggetti. Si può controllare facilmente la sovrapposizione dei layers con la regola z-index. Guarda questa demo di esempio.
- Nested grid: un container grid può essere a sua volta contenuto in un grid. Questa caratteristica offre numerose possibilità di design, guarda questo esempio.
Grid template areas
Ci sono vari approcci per costruire un CSS Grid layout.
Quello che mi ha colpito maggiormente è basato sulla costruzione della struttura con l’uso della proprietà CSS grid-template-areas, che definisce ogni parte del layout facendo riferimento ai nomi delle aree specificate con la proprietà grid-area.
Eccone un esempio:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}
Questo metodo permette due cose incredibili:
- la posizione che decidiamo per gli elementi è indipendente dall’ordine che questi elementi hanno nel markup;
- usando le media query è possibile decidere diverse disposizioni a seconda della viewport e se non voglio mostrare un elemento, invece di usare la regola “display: none;” semplicemente non scriverò la grid area relativa all’elemento all’interno della regola grid-template-areas. La cosa importante è il rispetto del numero di colonne.
Per viewports diverse posso avere diverse disposizioni degli elementi.
Il processo per usare CSS Grid in produzione
Quali sono gli step consigliati per usare CSS Grid nel momento dello sviluppo?
- Creare una struttura HTML gerarchica e semantica.
- Adottare un approccio mobile first e creare una singola colonna responsive per tutti gli schermi all’interno della quale inserire tutto il layout.
- Aggiungere proprietà e funzionalità per layouts complessi (grid, flex, JavaScript, etc.).
Conclusioni
Dopo aver studiato la documentazione che si trova online riguardo CSS Grid sono giunta alla conclusione che non siamo di fronte soltanto a nuove proprietà CSS ma ad un approccio e metodo radicalmente nuovi. I designers e gli sviluppatori hanno bisogno di esplorare CSS Grid per capire che cosa è in grado di costruire e quali sono i suoi limiti. Molti designers potrebbero non imparare mai il linguaggio CSS ma è necessario che lo capiscano abbastanza per comprendere bene questo nuovo mezzo artistico.
CSS Grid rappresenta una svolta nel design e nello sviluppo perché implica un nuovo approccio: visuale e non logico. Dobbiamo quindi imparare molte nuove proprietà ma anche ripensare interamente ciò che abbiamo imparato in passato.
Link utili
* CSS Grid Complete documentation: A Complete Guide to Grid | CSS-Tricks
* Browser support
* @supports CSS at-rule documentation
* Mozilla Grid inspector
