logo logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Biadets Blog

I Grid item in CSS

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

Le proprietà grid-column-start e grid-column-end

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:

A
B
C
D

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

Nota: la proprietà 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.

Ad esempio:
  • Se scrivi grid-column-end:3, l'elemento si estenderà fino alla colonna 3, occupandone solo una (tra le colonne 2 e 3).
  • Se scrivi 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.

1
2
3
A
B
C
D

.grid-item:nth-of-type(1) {
  grid-column-start: 2;
  grid-column-end: 4;
}

Le proprietà grid-row-start, grid-row-end e grid-row

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.

Le proprietà grid-row-start e grid-row-end

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.

Nota: la proprietà 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.

1
2
3
4
A
B
C
D
E
F

.grid-item:nth-of-type(1) {
  grid-row-start: 1;
  grid-row-end: 4;
}

Le proprietà grid-column e grid-row

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.

La proprietà grid-column

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.

La proprietà grid-row

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

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:

1
2
3
1
2
3
A
B
C
D
E
F

La proprietà justify-self

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.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  justify-self: start;
}

  • end: allinea l'elemento verso la fine della cella.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  justify-self: end;
}

  • center: centra l'elemento orizzontalmente nella cella.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  justify-self: center;
}

  • stretch: estende l'elemento per riempire l'intera larghezza della cella. Questo è il valore predefinito.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  justify-self: stretch;
}

La proprietà align-self

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.

Nota: per vedere gli effetti di 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.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  align-self: start;
}

  • end: allinea l'elemento verso la fine della cella, in basso.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  align-self: end;
}

  • center: centra verticalmente l'elemento all'interno della cella.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  align-self: center;
}

  • stretch: estende l'elemento per riempire l'intera altezza della cella. Questo è il valore predefinito.
1
2
3
4
5
6

.grid-item:nth-of-type(1) {
  align-self: stretch;
}

Prova!Completa gli spazi vuoti con il testo appropriato.
/* Posiziona il Grid item CSS in modo che inizi dalla seconda colonna */
.grid-item {
  grid--: 2;
}

Prova!Scegli l'opzione corretta tra quelle elencate.
/* Definisci la posizione del Grid item (righe e colonne) nel Grid */
.grid-item {
  ________: 1 / 2 / 4 / 3;
}