Proprietà grid-column-end

La proprietà grid-column-end definisce la posizione finale di un elemento nella griglia fino a una colonna specifica. Il valore della proprietà può essere un numero positivo o negativo. Se specifichiamo un numero positivo, la posizione finale dell'elemento viene contata da sinistra a destra. Specificando un numero negativo, l'elemento si posizionerà in ordine inverso, cioè da destra a sinistra.

Una sfumatura importante della proprietà grid-column-end è che il numero della colonna specificata non è incluso nella posizione finale dell'elemento - se impostiamo il numero 3, l'elemento occuperà solo la prima e la seconda colonna.

Sintassi

selettore {
	grid-column-end: numero positivo o negativo;
}

Esempio

Impostiamo per gli elementi nella griglia le posizioni finali:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Esempio

Ora utilizziamo la proprietà grid-column-start per fare in modo che il primo, il secondo e il terzo elemento si posizionino nella prima riga. E il quarto elemento occupi l'intera seconda riga:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 3;
	grid-column-end: 4;
}
#elem4 {
	grid-column-start: 1;
	grid-column-end: 4;
}

Esempio

Quando le colonne occupate da elementi adiacenti si sovrappongono, ogni elemento successivo si sposta sulla riga sottostante. Sfruttiamo questa caratteristica per fare in modo che il primo elemento si posizioni sulla prima riga, il secondo - sulla seconda, e il terzo e il quarto - sulla terza riga:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column-start: 1;
	grid-column-end: 4;
}
#elem2 {
	grid-column-start: 2;
	grid-column-end: 3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: 2;
}
#elem4 {
	grid-column-start: 3;
	grid-column-end: 4;
}

Esempio

Ora specifichiamo numeri negativi nella proprietà grid-column-end:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

#elem1 {
	grid-column-start: 1;
	grid-column-end: -4;
}
#elem2 {
	grid-column-start: 1;
	grid-column-end: -3;
}
#elem3 {
	grid-column-start: 1;
	grid-column-end: -2;
}

Vedi anche

proprietà grid-column-start,
che imposta la posizione iniziale di un elemento nella griglia per colonne
proprietà grid-column,
che imposta le posizioni iniziale e finale di un elemento nella griglia per colonne
proprietà grid-template-columns,
che definisce il numero e la larghezza delle colonne nella griglia
proprietà grid-auto-columns,
che definisce il numero e la larghezza delle colonne nella griglia implicita