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-startgrid-column-endgrid-row-startgrid-row-endgrid-columngrid-rowgrid-areajustify-selfalign-selfLa 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;
}