Le proprietà Grid vengono usate nel codice CSS per inserire degli elementi HTML, ridimensionarli singolarmente e visualizzarli come fossero all’interno di una griglia. A differenza di altre proprietà, possiamo avere dei riquadri che non dipendono dalla lunghezza o dall’altezza degli altri.
Per utilizzare queste proprietà, dobbiamo prima creare i vari riquadri nel codice HTML e inserirli all’interno di un altro elemento che agisce da genitore, un riquadro che li contiene tutti e da cui dipendono:
<body>
<div class="grid-g">
<div class="grid-f">Primo riquadro</div>
<div class="grid-f">Secondo riquadro</div>
<div class="grid-f">Terzo riquadro</div>
</div>
</body>
Le due classi inserite vengono usate come selettori nel file CSS. Attiveremo le proprietà grid nella classe genitore. La classe grid-f verrà usata semplicemente per personalizzare i vari riquadri. Possiamo anche dare un colore di sfondo o aggiungere un bordo al riquadro principale.
.grid-g {
display: grid;
border: 1px dashed;
background-color: lightgray;
}
.grid-f {
background-color: darkgrey;
margin: 2px;
text-align: center;
}
Se ai vari riquadri non impostiamo un certo margine non ci saranno spazi tra di loro e non si vedrà il colore di sfondo del riquadro genitore.
Inserire le colonne con la proprietà grid
Come impostazione predefinita, i riquadri vengono ordinati ciascuno su una riga. Per fare in modo che siano disposti in colonna, bisogna aggiungere la proprietà grid-template-column. Come valori possiamo aggiungere la lunghezza dei vari riquadri: il primo valore corrisponde al primo riquadro, il secondo valore al secondo riquadro e così via.
Per indicare la lunghezza dei riquadri possiamo ovviamente usare i pixel. Possiamo anche dare un valore ad uno di loro e assegnare il valore auto per gli altri in modo che riempiano tutto lo spazio che rimane.
Tuttavia, la proprietà Grid del CSS ha una sua unità di misura, indicata con il simbolo fr, che non ha un valore specifico ma che si adatta a seconda della lunghezza del riquadro principale. Assegnando lo stesso valore, il codice CSS divide il riquadro principale nel numero di colonne indicato dandogli la stessa lunghezza. Se un riquadro ha come valore 2 fr, mentre gli altri hanno 1 fr, quel riquadro sarà sempre lungo il doppio degli altri indipendentemente dallo schermo.
Se vogliamo che tutti i riquadri abbiano la stessa lunghezza possiamo abbreviare il codice assegnando il valore repeat e scrivendo tra parentesi il numero di riquadri e la lunghezza desiderata.
.grid-g {
display: grid;
border: 1px dashed;
background-color: lightgray;
grid-template-columns: repeat(3, 1fr);
}
.grid-f {
background-color: darkgrey;
margin: 2px;
text-align: center;
}
Se tutti i blocchi non entrano nello stesso rigo, il primo che eccede verrà riportato nel secondo rigo della prima colonna seguito poi dagli altri riquadri.
Possiamo fare la stessa cosa con le righe utilizzando la proprietà grid-template-rows. Possiamo stabilire la lunghezza e l’altezza delle righe e delle colonne insieme separandole da un simbolo /. Per fare ciò basta inserire un codice simile a quello sotto al posto di quello usato prima:
grid-template: 1fr / 2fr 2fr 2f
Il primo valore indica l’altezza della riga mentre i valori dopo il simbolo / rappresentano la lunghezza di ciascuna colonna. Per le righe è stato inserito un solo valore perché i tre riquadri entrano tutti in una sola riga. Se ne aggiungiamo ancora, il browser visualizzerà delle righe vuote.
Inserire lo spazio tra le righe e le colonne
Possiamo aggiungere dello spazio tra ciascuna riga con la proprietà row-gap mentre possiamo aggiungere spazio tra le colonne con la proprietà column-gap. Se usiamo semplicemente la proprietà gap, aggiungiamo lo stesso spazio tra le righe e le colonne inserendo un solo valore o la lunghezza dello spazio per le righe come primo valore e quello delle colonne come secondo valore.
gap: 10px;
Impostare l’area di ogni riquadro
Se ad ogni riquadro assegniamo una classe diversa possiamo configurare un’area personalizzata tramite le proprietà grid-colum e grid-row. Tramite queste proprietà stiamo indicato al file CSS quante colonne e quante righe deve riempire il nostro elemento.
Ritorniamo al codice HTML di partenza. Questa volta assegniamo classi diverse per ciascun riquadro.
<body>
<div class="grid-g">
<div class="grid-f r1">Primo riquadro</div>
<div class="grid-f r2">Secondo riquadro</div>
<div class="grid-f r3">Terzo riquadro</div>
</div>
</body>
Nel file CSS scriveremo:
.grid-g {
display: grid;
border: 1px dashed;
background-color: lightgray;
grid-template-columns: repeat(3, 2fr);
grid-template-row: repeat(4, 50px);
}
.grid-f {
background-color: darkgrey;
margin: 2px;
text-align: center;
}
.r1 {
grid-column: span 3;
grid-row: span 2;
}
In questo caso, il primo riquadro riempirà tutta la prima riga dato nel selettore grid-g abbiamo creato soltanto 3 colonne. La proprietà grid-row funziona solo se ci sono abbastanza righe.
Prova ad usare le proprietà Grid in un file CSS tramite Visual Studio Code o un altro editor.
Assegnare nomi ai selettori Grid
Proprio come possiamo assegnare delle classi e degli id agli elementi HTML, così possiamo dare dei nomi ai selettori dei riquadri interessati. Nell’esempio che segue, teniamo conto di avere creato quattro riquadri nel codice HTML invece di tre e di avergli assegnato le classi r1, r2, r3 ed r4.
Invece di stabilire quante colonne e quante righe devono essere occupate da ciascun riquadro, ci limitiamo ad assegnargli un nome con la proprietà grid-area.
.grid-g {
display: grid;
border: 1px dashed;
background-color: lightgray;
grid-gap: 2px;
grid-template-areas:
"r1 r2"
"r3 r4";
}
.grid-f {
background-color: darkgrey;
margin: 2px;
text-align: center;
}
.r1 {
grid-area: r1;
}
.r2 {
grid-area: r2;
}
.r3 {
grid-area: r3;
}
.r4 {
grid-area: r4;
}
Nel selettore del riquadro principale abbiamo inserito due nuove proprietà:
- grid-gap che inserisce lo spazio tra i vari riquadri;
- grid-template-areas che serve a formare la griglia;
- Per comodità i nomi dei riquadri vengono inseriti nello stesso modo in cui devono essere visualizzati. Ciascuna scritta tra virgolette rappresenta una riga e tutti i nomi inseriti lì sono dei riquadri. Se scriviamo un . al posto di un nome stiamo creando una cella vuota
Prova su Visual Studio Code come appaiono i quattro riquadri scrivendo le seguenti regole grid-template-areas:
- “r1 r2 r4” “r3 r2 .”
- “r1 r2 r4” “r1 r2 r4”
- “r1 r2 r3” “r4”
Possiamo anche assegnare delle classi e dei nomi specifici per creare le sezioni di una pagina web. Tuttavia, per queste cose i principali strumenti per creare siti web utilizzano la visualizzazione a blocchi e soltanto per inserire le barre laterali all’interno degli articoli utilizzano la visualizzazione a griglia.