Il Grid container è un elemento che raccoglie altri elementi e li dispone in una struttura a griglia. Attribuendogli display:grid, organizza il contenuto in righe e colonne, semplificando la creazione di layout ordinati e dinamici.
Abbiamo parlato della differenza tra Grid container e Grid item nella lezione precedente.
In questa lezione, vediamo quali sono le proprietà del Grid container:
grid-template-columnsgrid-template-rowsgrid-template-areasgrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-gapjustify-contentalign-contentQuesta proprietà serve a definire le colonne della griglia, cioè il numero e le dimensioni delle colonne all'interno del Grid container.
Per definire il numero di colonne in una griglia, devi specificare un valore per ogni colonna all'interno della proprietà grid-template-columns. Il numero di valori assegnati corrisponde esattamente al numero di colonne che verranno create.
Ad esempio, per creare 3 colonne uguali:
.grid {
display: grid;
grid-template-columns: auto auto auto;
}Per creare 5 colonne:
.grid {
display: grid;
grid-template-columns: auto auto auto auto auto;
}In entrambi gli esempi abbiamo utilizzato il valore auto, ma lo stesso principio si applica a tutti gli altri valori che vedremo ora.
Vediamo i valori possibili da usare con grid-template-columns:
auto: determina la larghezza della colonna automaticamente in base al contenuto..grid-container {
display: grid;
grid-template-columns: auto auto auto;
}min-content e max-content: ogni colonna assume la larghezza minima o massima necessaria per contenere il contenuto..grid-container {
display: grid;
grid-template-columns: min-content min-content min-content;
}fr1fr, allora lo spazio totale viene suddiviso equamente tra di loro..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}2fr, avrà a disposizione il doppio dello spazio rispetto alle colonne con 1fr..grid-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}px: ogni colonna avrà una larghezza fissa o relativa. Ad esempio, posso impostare le colonne di 100px e 20%..grid-container {
display: grid;
grid-template-columns: 100px 20% 50px;
}100px 1fr auto: la prima colonna ha larghezza fissa (di 100px), la seconda occupa una frazione dello spazio e la terza si adatta al contenuto..grid-container {
display: grid;
grid-template-columns: 100px 1fr auto;
}repeat(n, valore) ripete il valore un numero n specifico di volte; è utile per creare colonne uguali quando sono molte. Ad esempio, repeat(3, 1fr) crea tre colonne, ciascuna di 1fr.grid-template-columns: repeat(3, 1fr); /* Ovvero: 1fr 1fr 1fr */
grid-template-columns: repeat(2, 1fr) 100px; /* Ovvero: 1fr 1fr 100px */
grid-template-columns: repeat(2, 1fr 100px); /* Ovvero: 1fr 100px 1fr 100px */Questa proprietà funziona in modo simile a grid-template-columns, ma definisce l'altezze delle righe.
auto: ogni riga adatta la sua altezza in base al contenuto..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}min-content e max-content: ogni riga assume l’altezza minima o massima necessaria per contenere il contenuto..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: min-content;
}fr1fr, allora lo spazio totale viene suddiviso equamente tra di loro. Possiamo impostare un'altezza doppia (2fr) per la seconda riga: .grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 2fr;
}px: ogni rg avrà una larghezza fissa o relativa. Ad esempio, posso impostare di righe di 100px e 20%..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 20%;
}repeat(n, valore) ripete il valore un numero n specifico di volte; è utile per creare righe uguali quando ce ne sono molte da definire. Ad esempio, repeat(3, 1fr) specifica che ciascuna delle tre righe ha un'altezza di 1fr..grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
}La proprietà grid-template-areas definisce il layout della griglia assegnando nomi alle aree. Ogni stringa rappresenta una riga, mentre i nomi separati da spazi rappresentano le colonne.
Ad esempio, voglio creare un layout di questo tipo:
Qui, le celle A e D occupano due spazi, mentre B e C ne occupano uno solo. Per ottenere questo risultato:
<div class="grid-container">
<div style="grid-area: a;">A</div>
<div style="grid-area: b;">B</div>
<div style="grid-area: c;">C</div>
<div style="grid-area: d;">D</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-areas:
"a a b"
"c d d";
}
</style>Nell'esempio:
grid-template-areas, assegniamo le posizioni nella griglia: ripetere un nome indica che quell'area si estende su più colonne.grid-area, associamo ogni elemento HTML alla rispettiva area della griglia. Ad esempio, un elemento con grid-area:a; occuperà la posizione assegnata alla lettera "A".Se vuoi lasciare una cella vuota, usa il punto (.) all'interno di grid-template-areas.
Le proprietà grid-auto (ovvero grid-auto-columns, grid-auto-rows e grid-auto-flow) definiscono le dimensioni e l'ordine degli spazi creati automaticamente per gli elementi extra della griglia. In genere, comunque, non è necessario specificarle.
Nello specifico:
grid-auto-columns imposta la larghezza delle colonne generate automaticamente.grid-auto-flow determina l’ordine di posizionamento degli elementi (per righe o colonne).grid-auto-rows imposta l’altezza delle righe create automaticamente..grid-container {
display: grid;
grid-template-areas:
"a a"
". b";
grid-auto-columns: 100px;
}La proprietà grid-gap definisce lo spazio tra le colonne e le righe in una griglia.
La sintassi è: grid-gap:colonna riga. È anche possibile specificare un singolo valore, che verrà applicato sia alle colonne che alle righe.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 20px;
}Nell'esempio, abbiamo applicato uno spazio di 20px sia per le colonne che per le righe.
Nota: ad oggi, la proprietà grid-gap è spesso sostituita da gap, che è più generale e semplice da usare, ma funziona allo stesso modo.
La proprietà justify-content nel Grid container allinea l'intera griglia lungo l'asse orizzontale (da sinistra a destra) quando lo spazio disponibile è maggiore della larghezza complessiva delle colonne.
Questa proprietà accetta i valori:
start: allinea la griglia all'inizio del contenitore (a sinistra)..grid-container {
display: grid;
justify-content: start;
}end: allinea la griglia alla fine del contenitore (a destra)..grid-container {
display: grid;
justify-content: end;
}center: centra la griglia orizzontalmente nel Grid container..grid-container {
display: grid;
justify-content: center;
}space-around: distribuisce lo spazio in eccesso intorno alle colonne, creando uno spazio uguale su entrambi i lati di ogni colonna..grid-container {
display: grid;
justify-content: space-around;
}space-between: distribuisce lo spazio in eccesso solo tra le colonne..grid-container {
display: grid;
justify-content: space-between;
}space-evenly: distribuisce lo spazio in eccesso in modo uniforme: lo spazio tra le colonne e i bordi del contenitore è uguale..grid-container {
display: grid;
justify-content: space-evenly;
}La proprietà align-content controlla l'allineamento verticale dell'intera griglia. Ha effetto solo se l'altezza del Grid container è maggiore del contenuto.
Accetta i seguenti valori:
start: allinea le righe della griglia in alto.
.grid-container {
display: grid;
height: 200px;
align-content: start;
}end: allinea le righe della griglia in basso..grid-container {
display: grid;
height: 200px;
align-content: end;
}center: centra verticalmente le righe nella griglia..grid-container {
display: grid;
height: 200px;
align-content: center;
}space-around: distribuisce lo spazio sopra e sotto ogni riga. Gli spazi ai bordi sono la metà di quelli tra le righe..grid-container {
display: grid;
height: 200px;
align-content: space-around;
}space-between: distribuisce lo spazio solo tra le righe, con la prima riga in alto e l'ultima in basso..grid-container {
display: grid;
height: 200px;
align-content: space-between;
}space-evenly: distribuisce lo spazio in modo uguale tra tutte le righe e i bordi..grid-container {
display: grid;
height: 200px;
align-content: space-evenly;
}