Contenitore a griglia CSS
1
2
3
4
5
6
7
8
Contenitore a griglia
Per fare in modo che un elemento HTML si comporti come un contenitore di griglia, devi impostare la displayproprietà su
grido inline-grid.
I contenitori della griglia sono costituiti da elementi della griglia, posizionati all'interno di colonne e righe.
La proprietà grid-template-columns
La grid-template-columnsproprietà definisce il numero di colonne nel layout della griglia e può definire la larghezza di ciascuna colonna.
Il valore è un elenco separato da spazi, in cui ogni valore definisce la larghezza della rispettiva colonna.
Se desideri che il layout della griglia contenga 4 colonne, specifica la larghezza delle 4 colonne o "auto" se tutte le colonne devono avere la stessa larghezza.
Esempio
Crea una griglia con 4 colonne:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Nota: se hai più di 4 elementi in una griglia a 4 colonne, la griglia aggiungerà automaticamente una nuova riga in cui inserire gli elementi.
La grid-template-columnsproprietà può essere utilizzata anche per specificare la dimensione (larghezza) delle colonne.
Esempio
Imposta una dimensione per le 4 colonne:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
La proprietà grid-template-rows
La grid-template-rowsproprietà definisce l'altezza di ogni riga.
1
2
3
4
5
6
7
8
Il valore è un elenco separato da spazi, in cui ogni valore definisce l'altezza della rispettiva riga:
Esempio
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
La proprietà justify-content
La justify-contentproprietà viene utilizzata per allineare l'intera griglia all'interno del contenitore.
1
2
3
4
5
6
Nota: la larghezza totale della griglia deve essere inferiore alla larghezza del contenitore affinché la justify-contentproprietà abbia effetto.
Esempio
.grid-container {
display: grid;
justify-content: space-evenly;
}
Esempio
.grid-container {
display: grid;
justify-content: space-around;
}
Esempio
.grid-container {
display: grid;
justify-content: space-between;
}
Esempio
.grid-container {
display: grid;
justify-content: center;
}
Esempio
.grid-container {
display: grid;
justify-content: start;
}
Esempio
.grid-container {
display: grid;
justify-content: end;
}
La proprietà align-content
La align-contentproprietà viene utilizzata per allineare
verticalmente l'intera griglia all'interno del contenitore.
1
2
3
4
5
6
Nota: l'altezza totale della griglia deve essere inferiore all'altezza del contenitore affinché la align-contentproprietà abbia effetto.
Esempio
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Esempio
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Esempio
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Esempio
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Esempio
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Esempio
.grid-container {
display: grid;
height: 400px;
align-content: end;
}