Dove iniziare Linguaggi Aiuto Blog

Il Grid container in CSS

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

La proprietà grid-template-columns

Questa proprietà serve a definire le colonne della griglia, cioè il numero e le dimensioni delle colonne all'interno del Grid container.

Definire il numero delle colonne

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.

I valori di grid-template-columns

Vediamo i valori possibili da usare con grid-template-columns:

auto: determina la larghezza della colonna automaticamente in base al contenuto.

1

2

3

4

5

6

.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.

1

2

3

4

5

6

.grid-container {
  display: grid;
  grid-template-columns: min-content min-content min-content;
}

Unità 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.

1

2

3

4

5

6

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Se invece una colonna ha 2fr, avrà a disposizione il doppio dello spazio rispetto alle colonne con 1fr.

1

2

3

4

5

6

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

Unità assolute o relative (che abbiamo visto nelle unità di misura CSS) come px: ogni colonna avrà una larghezza fissa o relativa. Ad esempio, posso impostare le colonne di 100px e 20%.

1

2

3

4

5

6

.grid-container {
  display: grid;
  grid-template-columns: 100px 20% 50px;
}

Valori multipli, ad esempio 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.

1

2

3

4

5

6

.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 */

La proprietà grid-template-rows

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.

1

2

3

4

5

6

.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.

1

2

3

4

5

6

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: min-content;
}

Unità 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:

1

2

3

4

5

6

7

8

9

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr;
}

Unità assolute o relative come px: ogni rg avrà una larghezza fissa o relativa. Ad esempio, posso impostare di righe di 100px e 20%.

1

2

3

4

5

6

.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.

1

2

3

4

5

6

7

8

9

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
}

La proprietà grid-template-areas

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:

A

B

C

D

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:

Con grid-template-areas, assegniamo le posizioni nella griglia: ripetere un nome indica che quell'area si estende su più colonne.
Con 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

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

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.

1

2

3

4

5

6

.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

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).

1

2

3

4

5

6

.grid-container {
  display: grid;
  justify-content: start;
}

end: allinea la griglia alla fine del contenitore (a destra).

1

2

3

4

5

6

.grid-container {
  display: grid;
  justify-content: end;
}

center: centra la griglia orizzontalmente nel Grid container.

1

2

3

4

5

6

.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.
Gli spazi ai bordi del contenitore saranno più piccoli rispetto agli spazi tra le colonne.

1

2

3

4

5

6

.grid-container {
  display: grid;
  justify-content: space-around;
}

space-between: distribuisce lo spazio in eccesso solo tra le colonne.

1

2

3

4

5

6

.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.

1

2

3

4

5

6

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

La proprietà align-content

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.

1

2

3

4

5

6

.grid-container {
  display: grid;
  height: 200px;
  align-content: start;
}

end: allinea le righe della griglia in basso.

1

2

3

4

5

6

.grid-container {
  display: grid;
  height: 200px;
  align-content: end;
}

center: centra verticalmente le righe nella griglia.

1

2

3

4

5

6

.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.

1

2

3

4

5

6

.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.

1

2

3

4

5

6

.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.

1

2

3

4

5

6

.grid-container {
  display: grid;
  height: 200px;
  align-content: space-evenly;
}

Prova!Completa gli spazi vuoti con il testo appropriato.

/* Aggiungi le proprietà CSS corrette */
div {
display: ;
grid--columns: 1fr 1fr 1fr;
}

Prova!Scegli l'opzione corretta tra quelle elencate.

/* Aggiungi spazio uguale tra le colonne del Grid */
div {
display: flex;
_________: space-evenly;
}

	grid-auto-columns
	align-content
	justify-content