I Grid item sono gli elementi contenuti all'interno di un Grid container. Essi possono essere posizionati e dimensionati in modo dinamico grazie alle proprietà del layout Grid di CSS.
Le proprietà dei Grid item sono:
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
La proprietà grid-column-start
specifica da quale colonna deve iniziare un Grid item nel layout a griglia.
La sintassi di questa proprietà è: grid-column-start:
valore. Il valore indica il numero della colonna di griglia da cui far partire l'elemento.
Ad esempio, se vogliamo che il primo elemento inizi dalla seconda colonna, possiamo fare in questo modo:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item:nth-of-type(1) {
grid-column-start: 2;
}
Nell'esempio, il Grid container ha la proprietà display:grid
che abbiamo visto nella lezione introduttiva sul Grid in CSS. Per attribuire lo stile grid-column-start
alla prima casella, possiamo utilizzare :nth-of-type()
, una pseudo-classe.
Negli esempi successivi, specificheremo soltanto gli stili di .grid-item
per semplicità.
Se, invece, vogliamo che il primo elemento si estenda su più colonne, possiamo utilizzare in combinazione grid-column-start
e grid-column-end
.
La sintassi di grid-column-end
è la stessa di grid-column-start
.
In questo esempio, il primo elemento occupa due colonne: inizia dalla seconda e termina nella terza.
grid-column-end
indica la colonna in cui l'elemento termina, ma senza occuparla. In altre parole, l'elemento si estende fino alla colonna precedente a quella specificata.grid-column-end:3
, l'elemento si estenderà fino alla colonna 3, occupandone solo una (tra le colonne 2 e 3).grid-column-end:4
, l'elemento si estenderà fino alla colonna 4, occupandone due (tra le colonne 2-3 e 3-4).L'esempio qui sotto mostra la casella A che parte dalla colonna 2 e termina alla colonna 4 (non compresa). Sopra è indicato il numero delle colonne per facilitare la comprensione.
.grid-item:nth-of-type(1) {
grid-column-start: 2;
grid-column-end: 4;
}
Le proprietà grid-row-start
e grid-row-end
servono per posizionare i Grid item lungo le righe della griglia (cioè in verticale).
In particolare:
grid-row-start
: indica da quale linea della griglia inizia l'elemento.grid-row-end
: indica fino a quale linea arriva l'elemento.La proprietà grid-row-start
specifica da quale linea orizzontale parte il Grid item, mentre grid-row-end
specifica dove deve finire.
La sintassi è: grid-row-start:
valore. Il valore indica il numero della riga da cui far partire l'elemento. La stessa sintassi vale anche per grid-row-end
.
grid-row-end
indica la riga in cui l'elemento termina, ma senza occuparla. Perciò, l'elemento si estende fino alla riga precedente a quella specificata.Nell'esempio qui sotto, il blocco A occupa 3 righe differenti, iniziando da riga 1 e terminando a riga 4 (esclusa). Per aiutarti, abbiamo indicato a sinistra dove iniziano le righe.
.grid-item:nth-of-type(1) {
grid-row-start: 1;
grid-row-end: 4;
}
I Grid item possono essere posizionati in modo preciso all'interno della griglia grazie alle proprietà grid-column
e grid-row
. Queste due proprietà sono le scorciatoie delle proprietà CSS che abbiamo visto fin'ora.
grid-column
è una proprietà che permette di impostare contemporaneamente sia il punto di inizio e quello di fine del Grid item lungo l'asse orizzontale (le colonne).
La sintassi è: grid-column:
inizio /
fine, dove inizio specifica la colonna di partenza (inclusa) e fine quella finale (esclusa).
.grid-item:nth-of-type(1) {
grid-column: 2 / 5;
}
Nell'esempio, l'elemento inizia dalla colonna 2 e termina alla colonna 5 (esclusa) della tabella, occupando esattamente 3 colonne.
grid-row
è una proprietà che puoi usare per impostare contemporaneamente il punto di partenza e quello di fine del Grid item lungo l'asse verticale (le righe).
La sintassi è: grid-row:
inizio /
fine, dove inizio indica la riga da cui parte l'elemento e fine quella in cui finisce (esclusa).
.grid-item:nth-of-type(1) {
grid-row: 2 / 5;
}
In questo esempio si posiziona l'elemento dalla riga 2 alla riga 5 (esclusa) della griglia, facendolo occupare 3 righe.
La proprietà grid-area
può essere usata come scorciatoia per definire il posizionamento dei Grid item, sia orizzontalmente che verticalmente (colonne e righe).
La sintassi di questa proprietà è:grid-area:
grid-row-start /
grid-column-start /
grid-row-end /
grid-column-end.
Vediamo un esempio:
.grid-item:nth-of-type(1) {
grid-area: 1 / 2 / 3 / 4;
}
Nell'esempio, l'elemento A parte dalla riga 1 e dalla colonna 2, e termina nella riga 3 e colonna 4 (escluse). Il risultato finale sarà simile a questo:
La proprietà justify-self
controlla l'allineamento orizzontale di un singolo Grid item all'interno della sua cella.
Per gestire l'allineamento orizzontale su tutte le celle del Grid, puoi utilizzare la proprietà justify-content
, che avevamo già visto precedentemente.
La proprietà justify-self
accetta i seguenti valori:
start
: allinea l'elemento verso l'inizio della cella..grid-item:nth-of-type(1) {
justify-self: start;
}
end
: allinea l'elemento verso la fine della cella..grid-item:nth-of-type(1) {
justify-self: end;
}
center
: centra l'elemento orizzontalmente nella cella..grid-item:nth-of-type(1) {
justify-self: center;
}
stretch
: estende l'elemento per riempire l'intera larghezza della cella. Questo è il valore predefinito..grid-item:nth-of-type(1) {
justify-self: stretch;
}
La proprietà align-self
controlla l'allineamento verticale di un singolo Grid item all'interno della sua cella.
Per gestire l'allineamento verticale su tutte le celle del Grid, puoi utilizzare la proprietà align-content
, che avevamo già visto nella lezione precedente.
align-self
nei prossimi esempi, l'altezza delle righe deve essere maggiore di quella dell'elemento stesso. Quindi, puoi usare grid-template-rows:100px
per impostare l'altezza della prima riga a 100px.La proprietà align-self
accetta i seguenti valori:
start
: allinea l'elemento verso l'inizio della cella in alto..grid-item:nth-of-type(1) {
align-self: start;
}
end
: allinea l'elemento verso la fine della cella, in basso..grid-item:nth-of-type(1) {
align-self: end;
}
center
: centra verticalmente l'elemento all'interno della cella..grid-item:nth-of-type(1) {
align-self: center;
}
stretch
: estende l'elemento per riempire l'intera altezza della cella. Questo è il valore predefinito..grid-item:nth-of-type(1) {
align-self: stretch;
}