Concetti di base di CSS Grid

CSS Grid è un modulo CSS rivoluzionario, alla pari e, per certi versi, anche più di flexbox.

Prima della sua introduzione, il posizionamento e l'allineamento degli elementi in una pagina web richiedevano l'utilizzo di tecniche spesso complesse e poco intuitive, come il sistema di floating, posizionamento assoluto e in tempi più moderni con flexbox.

Tuttavia, nonostante la loro utilità, queste metodologie mostravano limiti soprattutto quando si trattava di creare griglie bidimensionali flessibili e responsive. L'introduzione di CSS Grid ha segnato un cambiamento fondamentale, fornendo agli sviluppatori un potente strumento per costruire layout web in modo più efficiente e logico. Diciamo che dal nostro cuore non sono mai uscite le tabelle HTML degli anni ‘90, primi anni 2000 che usavamo per creare i vari layout. Le tabelle non sono sopravvissute all’avvento del responsive, ma con grid abbiamo praticamente le stesse capacità, ma potenziate all’inverosimile.

Grazie a proprietà come display: grid, grid-template-columns, grid-template-rows e grid-area, è possibile creare griglie con strutture chiare e ben definite.

In questa introduzione a CSS grid, esploreremo le caratteristiche principali, come l'utilizzo delle unità fr per una flessibilità di layout senza precedenti, l'importanza del gap per la gestione dello spazio tra gli elementi, e le funzioni repeat(), auto-fit, e grid-template-areas per la definizione efficiente e semplificata delle griglie. Inoltre, vedremo come poter definire in anticipo le dimensioni di righe e colonne che ancora non esistono con grid-auto-rows e grid-auto-columns, come gli elementi possano estendersi su più celle con il spanning, e come la griglia risponda alle diverse dimensioni dello schermo tramite le media queries.

Se vuoi fare frontend development grid è un modulo essenziale da conoscere e da saper usare. Oltre alle proprietà vedremo anche gli strumenti di sviluppo, con il Grid Inspector, con il quale possiamo affinare ulteriormente la nostra comprensione e capacità di manipolare la griglia, rendendo il processo di design non solo più efficiente ma anche più piacevole.

Non ci resta quindi che iniziare.

La proprietà che dal il via a tutto

CSS Grid Layout, o semplicemente "grid", è un metodo di layout bidimensionale per il web che permette di creare interfacce utente complesse e responsive con meno sforzo rispetto ai metodi tradizionali come float o flexbox.

La dichiarazione display: grid; è utilizzata per definire un container come griglia. Quando applicato a un elemento, i suoi figli diretti diventano automaticamente gli elementi della griglia, grid-item.

Lo spazio tra le celle della griglia

Come già visto per flexbox, anche grid supporta la proprietà gap. Si tratta di una shorthand utilizzata per creare spazi tra le righe (row-gap) e le colonne (column-gap) di una griglia.

Questo elimina la necessità di utilizzare margin sui singoli elementi della griglia per creare spazio tra di essi, semplificando notevolmente la vita.

1.grid-container {
2   display: grid;
3   gap: 2rem;
4}

Gli strumenti utili da tenere sempre sotto mano

Come già anticipato i vari dev tools dei browser offrono funzionalità notevoli quando si tratta di grid. Gli elementi alla quale è stata assegnata una dichiarazione display: grid verranno contrassegnati nel pannello Elementi con l’etichetta grid. Cliccandola abbiamo la possibilità di vedere la struttura della griglia, comprese le coordinate delle varie celle, più tutte un’altra serie di funzionalità utili.

Creiamo le nostre prime colonne

La proprietà grid-template-columns definisce il numero e la dimensione delle colonne in una griglia. In questo modo si possono specificare le dimensioni con unità fisse (come px), percentuali, o con fr, un'esclusiva di grid, per quanto si basi sull’algoritmo di flex, per distribuire lo spazio disponibile.

1.grid-container {
2   display: grid;
3   gap: 2rem;
4   grid-template-columns: 1fr 1fr 1fr;
5}

Più nello specifico l'unità fr sta per "frazione" e viene utilizzata per distribuire lo spazio disponibile in una griglia. Se si definiscono le colonne come nell’esempio, con 1fr 1fr 1fr, ogni colonna occuperà un terzo dello spazio disponibile, indipendentemente dalla larghezza del container della griglia.

Attenzione però che se dovessimo mai avere bisogno di 12 colonne non siamo costretti a scrivere per 12 volte 1fr, ma possiamo avvalerci della funzione repeat().

La funzione repeat() è una funzionalità in CSS che permette di ripetere una porzione di definizione di griglia per un numero specificato di volte. È particolarmente utile quando si hanno molte colonne o righe che condividono la stessa dimensione. Possiamo aggiornare il nostro esempio con repeat(3, 1fr) e ottenere il medesimo risultato, ma con una scrittura più mantenibile e pulita.

1.grid-container {
2   display: grid;
3   gap: 2rem;
4   grid-template-columns: repeat(3, 1fr);
5}

Quando dichiariamo le righe?

Se te lo stai chiedendo, sì esiste anche grid-template-rows, ma non viene utilizzato così spesso come si può pensare.

In una griglia CSS, non è sempre necessario dichiarare esplicitamente le righe con grid-template-rows. Se non vengono definite, la griglia creerà automaticamente il numero di righe necessarie in base agli elementi della griglia e al loro posizionamento.

Possono esserci dei casi in cui è comunque necessario definire le righe e allora in quel caso la proprietà sarà lì pronta per essere usata.

Espandere gli elementi della griglia con grid-column

Partiamo subito col dire che grid-column è una shorthand che ci evita la scrittura di grid-column-start e grid-column-end.

Queste proprietà ci permettono di “estendere” un grid-item tra le celle della nostra griglia.

Per definire quanto deve estendersi possiamo scrivere il valore della proprietà in due modi.

1.item-2 {
2   grid-column: span 2;
3}

Oppure

1.item-2 {
2   grid-column: 2 / 4;
3}

Mentre nel primo esempio semplicemente gli diciamo di estendersi sue due celle (compresa la sua di partenza), nel secondo esempio i numeri non sono proprio casuali, ma si basano sulle coordinate che possiamo visualizzare con l’ausilio dei devtools del browser.

Nel layout a griglia, ogni linea di divisione tra le celle è numerata. Questi numeri possono essere utilizzati per posizionare gli elementi della griglia utilizzando le proprietà grid-column-start, grid-column-end, grid-row-start, grid-row-end.

I due valori negli esempi precedenti usando le longhand saranno:

• grid-column-start: span 2; grid-column-end: auto
• grid-column-start: 2; grid-column-end: 4

Usare le media queries

Da quando CSS3 venne introdotto sono stati fatti passi da gigante e le media queries per quanto siano ancora estremamente utili si utilizzano sempre meno.

Con CSS grid si possono usare tranquillamente per aggiungere o rimuovere le colonne, ma ci sono anche funzioni che ne riducono drasticamente la già poca necessità.

1@media (min-width: 1024px) {
2  .container {
3    grid-template-columns: repeat(4, 1fr);
4  }
5  .item-1 {
6    grid-column: span 2;
7  }
8  .item-5 {
9    grid-column: span 2;
10  }
11  .item-4 {
12    grid-column: 4;
13    grid-row: 1 / 3;
14  }
15}

La funzione auto-fit è usata con grid-template-columns per gestire dinamicamente il numero di colonne in base alla larghezza del container. Permette alle colonne di adattarsi al contenitore e può essere utilizzata con minmax() per dimensioni di colonna flessibili.

1.grid-container {
2   display: grid;
3   gap: 2rem;
4   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
5}

Il nostro grid-template-columns è cambiato tantissimo rispetto a quei 3 1fr scritti all’inizio, ma cosa significa esattamente quello che c’è in questo nuovo esempio?

• auto-fit gestisce automaticamente il numero di colonne
• minmax(200px, 1fr) significa che le colonne dovranno essere minimo 200px e massimo 1 fr di larghezza. Quando la colonna raggiungerà i 200px di larghezza verranno riadattate righe e colonne affinché la condizione sia corretta.

Gestire le griglie come un pro

Ok, forse il titolo è esagerato, ma grid-template-areas è sicuramente la mia proprietà preferita di css grid.

Permette di definire un layout in termini di "aree" nominative. Questo può rendere il markup più leggibile e mantenibile, poiché è possibile nominare le parti logiche della pagina, come "header", "footer", "sidebar", e posizionare gli elementi della griglia in queste aree.

Vediamolo con un esempio:

1.container {
2  display: grid;
3  gap: 2rem;
4  grid-template-areas:
5    'one'
6    'two'
7    'three'
8    'four'
9    'five';
10}
11
12@media (min-width: 1024px) {
13  .container {
14    grid-template-areas:
15      'one one two four'
16      'three five five four';
17  }
18}

Tutto il resto dei precedenti esempi è stato rimosso e non vediamo assolutamente niente, abbiamo perso la nostra griglia, infatti manca ancora un pezzo.

Al di fuori del blocco della media query scriviamo:

1.item-1 {
2  grid-area: one;
3}
4
5.item-2 {
6  grid-area: two;
7}
8
9.item-3 {
10  grid-area: three;
11}
12
13.item-4 {
14  grid-area: four;
15}
16
17.item-5 {
18  grid-area: five;
19}

In questo modo ogni elemento sarà assegnato ad un’area della griglia e “magicamente” avremo di nuovo il nostro layout. Sicuramente serve un filo più di setup, ma quello che possiamo fare ha veramente dell’incredibile. Stupisce ancora me dopo tutto l’uso intensivo che ho fatto di grid in questi anni.

Infine…

Definire righe e colonne senza nemmeno sapere se ci saranno

Le proprietà grid-auto-columns e grid-auto-rows di CSS Grid offrono un controllo automatico sulle dimensioni delle colonne e delle righe non esplicitate. grid-auto-columns gestisce la larghezza delle colonne aggiunte implicitamente, come quando un elemento si estende oltre le colonne definite; analogamente, grid-auto-rows regola l'altezza delle righe extra create per contenere elementi in eccesso rispetto a quelle definite.

Questi strumenti risultano essenziali per layout dinamici, adattandosi automaticamente al contenuto senza che si debba definire a monte il numero esatto di righe o colonne, rendendo i layout più flessibili e gestibili, soprattutto quando il numero di elementi è variabile.