Risorse sul web
https://www.w3schools.com/css/css_grid.asp
https://www.ionos.it/digitalguide/siti-web/creare-siti/css-grid/
Il modulo CSS Grid Layout, indubbiamente il più utilizzato, offre un sistema di layout basato su griglia, con righe e colonne, che semplifica la progettazione di pagine Web.
Doversamente dal Felxbox layout, siamo di fronte ad un layout bidimensionale, ovvero, che gestisce due dimensioni contemporaneamente (colonne e righe).
Il funzionamento è sempre lo stesso; avremo proprietà da applicare al container (box contenitore) e proprietà da applicare ai singoli elementi (elementi contenuti).
<div class="grid-container"> <div class="grid-item1">1</div> <div class="grid-item2">2</div> <div class="grid-item3">3</div> <div class="grid-item4">4</div> <div class="grid-item5">5</div> <div class="grid-item6">6</div> <div class="grid-item7">7</div> <div class="grid-item8">8</div> <div class="grid-item9">9</div> </div>
Di seguito raggruppiamo tutte le proprietà per il conteiner:
| display | con valore "grid" attiva il Grid layout |
grid-template-rows | con valori multipli imposta dimensioni e numero di righe da visualizzare |
grid-template-columns | con valori multipli imposta dimensioni e numero di colonne da visualizzare |
grid-gap | imposta una spaziatura uniforme tra righe e colonne |
| grid-column-gap | imposta spaziatura unicamente tra le colonne |
| grid-row-gap | imposta spaziatura unicamente tra le righe |
| grid-template-rows | suddivide e raggruppa le celle di una griglia in aree |
| justify-items | regola globalmente l’allineamento orizzontale per tutti gli elementi |
| align-items | regola globalmente l’allineamento verticale per tutti gli elementi |
| palce-items | shorthano per indicare i valori di justify-items e align-items |
Con la proprietà display attribuendole il valore "grid" attiviamo il CSS Grid Layout. Anche in questo caso i valori possibili sono due: grid e inline-grid.
.grid-container{
display: grid;
}
Con la proprietà grid-template-columns definiamo contemporaneamente il numero e le dimensioni delle dimensioni da visualizzare nella griglia.
.grid-container{
display: grid;
grid-template-columns: 150px 100px 100px 150px;
}
Abbiamo definito 4 colonne, indicando 4 valori, la prima e l'ultima larghe 150px mentre le due in mezzo larghe 100px.
Oltre alle specifiche esatte dei pixel, è possibile utilizzare anche una percentuale o altre dimensioni comuni nei CSS. Con le specifiche "max-content" e "min-content" la griglia può essere creata anche in relazione al contenuto.
Questa proprietà è identica alla precedente con l'unica differenza che anziché definire colonne, con questa proprietà definiamo numero e dimensioni delle righe.
.grid-container{
display: grid;
grid-template-columns: 150px 100px 100px 150px;
grid-template-rows: 100px 100px;
}
Le fraction sono un'unità di misura con una caratteristica speciale.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
}
Con questa unità di misura divisiamo lo schermo in modo simile alle percentuali.
Stiamo dicendo di dividere l'area in 5 unità orizzontali (colonne) con una colonna (la seconda) che sarà il doppio delle altre.
Il vantaggio di lavorare con dimensioni relative è che la griglia può adattarsi automaticamente alle dimensioni dello schermo.
Con la proprietà grid-gap indichiamo una spaziatura generale attorno a righe e colonne.
.grid-container{
display: grid;
grid-template-columns: 150px 100px 100px 150px;
grid-template-rows: 100px 100px;
grid-gap: 5px;
}
In altermativa con queste due proprietà possiamo specificare distintamente le spaziature per righe e colonne.
.grid-container{
display: grid;
grid-template-columns: 150px 100px 100px 150px;
grid-template-rows: 100px 100px;
grid-column-gap: 10px;
grid-row-gap: 5px;
}
Con CSS Grid Layout è possibile riunire celle in aree e denominarle.
E' utile per delimitare delle aree all'interno della nostra templete-grid per poterla associare ad un elemento specifico.
Per prima cosa dovremo comunque procederre con la costruzione della griglia con le proprietà grid-templete-column e grid-templete-row:
.grid-container{
grid-templete-column: 100px 100px 100px 100px 100px;
grid-templete-row: 50px 50px 50px;
grid-gap: 10px;
}
Abbiamo creato un templete di 5 colonne e 3 righe per un totale di 15 celle;
Possiamo ora procedere con la suddivisione in aree:
.grid-container{
grid-templete-column: 100px 100px 100px 100px 100px;
grid-templete-row: 50px 50px 50px;
grid-gap: 10px;
grid-template-areas:
"area1 area1 area1 area1 area1"
"area2 area2 . area3 area3"
"area2 area2 area4 area4 area4";
}
Si scrivono cella per cella i nomi delle aree desiderate. Se non si desidera assegnare una cella ma lasciarla vuota, basta inserire un punto.
Ogni riga va aperta e chiusa con le virgolette.
Possiamo ora procedere con l'assegnazione delle aree:
Note: per comprendere questo punto è opportuno conoscere già le proprietà da associale ai singoli elementi.
.grid-item1 {
grid-area: area1;
}
.grid-item2 {
grid-area: area2;
}
.grid-item3 {
grid-area: area3;
}
.grid-item4 {
grid-area: area4;
}
La proprietà justfy-items, proprietà per il container, regola globalmente l'allineamento in senso orizzontale di tutti gli elementi della griglia.
Note: più avanti vedremo proprietà per i singoli elementi in grado di regolare singolarmente le visualizzazioni.
.grid-container {
justify-items: center;
}
La proprietà align-items, anch'essa proprietà per il container, regola globalmente l'allineamento in senso verticale di tutti gli elementi della griglia.
.grid-container {
justify-items: start;
}
| start | in senso orizzontale: da sinistra; in senso veriticale: dall'alto; |
| end | in senso orizzontale: da destra; in senso veriticale: dal basso; |
| center | al centro |
| stretch | distendi/espandi |
La proprietà place-items è una shorthand per la sintassi abbreviate; ci consente di indicare contemporaneamente, in ordine, i valori di justify-items e align-items.
.grid-container{
place-items: start / center;
}
<div class="grid-container">
<p class="grid-item1">1</p>
<p class="grid-item2">2</p>
<p class="grid-item3">3</p>
<p class="grid-item4">4</p>
<p class="grid-item5">5</p>
<p class="grid-item6">6</p>
<p class="grid-item7">7</p>
<p class="grid-item8">8</p>
<p class="grid-item9">9</p>
<p class="grid-item10">10</p>
</div>
.grid-container{
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px 100px;
grid-gap: 5px;
}
Griglia formata da 5 colonne e 5 righe con una spaziatura uniforme di 5px. Layout totale di 25 celle.
Totale di 10 elementi <p> da distribuire sulla griglia.
Con le seguenti proprietà è possibile posizionare i diversi oggetti all'interno della griglia. Le proprietà vanno attribuite singolaremente ad ogni elemento contenuto.
| grid-column-start | valore numerico che indica da quale posizione/colonna inizia un elemento |
| grid-column-end | valore numerico che indica fino a quale posizione/colonna si estende un elemento |
| grid-row-start | valore numerico che indica da quale posizione/riga inizia un elemento |
| grid-row-end | valore numerico che indica fino a quale posizione/riga si estende un elemento |
| grid-column | shorthand per indicare le colonne da occupare |
| grid-row | shorthand per indicare le righe da occupare |
grid-area | associa e posiziona gli elementi nelle aree create nel templete container |
| justify-self | imposta allineamento orizzontale per il singolo elemento |
| align-self | imposta allineamento verticale per il singolo elemento |
| place-self | shorthand per justify-self align-self |
.grid-item1 {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 3;
}
Le seguenti proprietà faranno in modo che l'elemento con classe .grid-item1 occuperà uno spazio nella griglia di 5 colonne per 2 righe.
I numeri indicanti non fanno riferimento alle celle bensi alle linee.
| valori numerici | indicano le linee per le colonne da sinistra a destra e dall'alto verso il basso per le righe |
| span | con "span" si specifica quante celle bisogna includere nella direzione indicata (column o row) |
| nomi delle righe | all'interno di "grid-template-rows" e "grid-template-columns" è possibile dare un nome alle righe (tra parentesi quadre) e poi fare riferimento a questi nomi |
Come visto nell'esempio qui sopra possiamo indicano le linee numericamente; per le colonne i numeri faranno riferimento alle linee da sinistra a destra e per le righe, i numeri faranno riferimento alle linee dall'alto verso il basso.
Le proprietà grid-column e grid-row sono delle shorthand; ci permettono di scrivere i valori start ed end di column e row in un'unica proprietà.
E' possibile utilizzarle valorizzandole mediante le paroli chiave span e i line-name.
Con la parola chiave "span" si specifica quante celle bisogna includere nella direzione indicata.
.grid-item1 {
grid-column: 1 / span 6;
grid-row: 1 / span 3;
}
Le proprietà grid-column e grid-row sono delle shorthand
All'interno delle proprietà grid-template-rows e grid-template-columns per il container, che utilizziamo per definire il template della griglia, è possibile includere tra i valori, i nomi delle linee; tali nomi sono da indicare tra parentesi quadre; successivamente sarà possibile utilizzarli come riferimento all'interno delle shorthand grid-column e grid-row.
.grid-container{
grid-template-column: 100px [col-linea1] 100px [col-linea2] 100px [col-linea3];
grid-template-column: 100px [row-linea1] 100px [row-linea2] 100px [row-linea3];
}
.grid-item1{
grid-column: col-linea1 col-linea2;
grid-row: row-linea1 row-linea3;
}
La proprietà è utilizzate negli elementi contenuti per associare le aree create con la proprietà per il container container grid-templete-areas trattata più sopra.
.grid-item1{
grid-area: area1;
}
La proprietà justify-selft, simile a justify-items per il container, è utile per indicare l'allineamento orizzontale del singolo elemento.
.grid-item1{
justify-self: start;
}
La proprietà align-selft, simile a align-items per il container, è utile per indicare l'allineamento verticale del singolo elemento.
.grid-item1{
align-self: center;
}
La proprietà place-seft, simile a place-items per il container, è una shorthand di sintassi abbreviata che ci permette di indicare contemporaneamente i valori, in ordine, di justify-self e align-self.
.grid-item1{
place-self: start / center;
}
I valori possibili sono i medesimi delle proprietà similari dedicate al container.
Con le seguenti proprietà e funzioni, che ci consentono di creare degli automatismi, è possibile impostare un template per una griglia che si adatti automaticamente ai diversi dispositivi.
Le seguenti istruzioni si applicano sempre al box-container.
| repeat() | imposta specifica dimensione e frequenza di ripetizione |
minmax() | imposta specifiche dimensioni minime e massime |
Con funzione repeat() si può impostare una specifica di dimensione e stabilire la frequenza di ripetizione dello schema.
La funzione va applicata all'interno delle proprietà grid-template-column e grid-template-rows e prevede due paramenti: il primo è il comportamento il secondo è la dimensione specifica.
.grid-container{
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(auto-fit, 100px);
}
Valori possibili di comportamento
| auto-fit | regola le singole celle in modo tale che lo spazio venga utilizzato fino al bordo |
| auto-fill | aggiunge il maggior numero possibile di celle senza rompere il confine del container può lasciare spazio inutilizzato |
Con la funzione minmax() è possibile impostare valori minimi e massimi e fare in modo che un item non diventi troppo piccolo o troppo grande.
Anche in questo caso sono previsti due paramentri; in ordine, la misura minima e la misura massima.
All'interno delle proprietà grid-template-columns e grid-template-rows vanno utilizzate in combinata con la funzione repeat() ed al posto del campo desinato alla misura specifica.
.grid-container{
grid-template-columns: repeat(auto-fit, minmax(50px, 150px));
grid-template-rows: repeat(auto-fit, minmax(50px, 150px));
}
Le proprietà grid-auto-columns e grid-auto-rows sono proprietà che incorporano già la funzione repeat().
Possono essere utilizzate con o senza la funzione minmax().
grid-auto-columns | indicando la dimensione della colonna, suddivide la griglia in tante colonne quante quelle possibili |
grid-auto-rows | indicando la dimensione della riga, suddivide la griglia in tante colonne quante quelle possibili |
.grid-container{
grid-auto-columns: 100px;
grid-auto-rows: 100px;
}
.grid-container{
grid-auto-columns: minmax(50px, 150px);
grid-auto-rows: minmax(50px, 150px);
}