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-columns
grid-template-rows
grid-template-areas
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-gap
justify-content
align-content
Questa 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;
}
fr
: divide lo spazio disponibile in frazioni uguali tra le colonne. Ad esempio, se ognuno ha 1fr
, 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;
}
fr
: divide lo spazio disponibile in frazioni uguali tra le righe. Ad esempio, se ognuno ha 1fr
, 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;
}