Proprietà grid-column-start

La proprietà grid-column-start definisce la posizione iniziale di un elemento nella griglia per quanto riguarda le colonne. Il valore della proprietà può essere un numero positivo o negativo. Se specifichiamo un numero positivo, la posizione iniziale dell'elemento viene contata da sinistra a destra. Specificando un numero negativo, l'elemento si posizionerà in ordine inverso, cioè da destra a sinistra.

Sintassi

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

Esempio

Assegniamo agli elementi nella griglia le posizioni iniziali:

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

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

Esempio

E ora specifichiamo nella proprietà grid-column-start dei numeri negativi:

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

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

Esempio

E ora con l'aiuto della proprietà grid-column-end facciamo in modo che il primo, il secondo e il terzo elemento si posizionino nella prima riga. E il quarto elemento occupi tutta la 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. Tenendo conto di questa possibilità, facciamo in modo che il primo elemento si posizioni nella prima riga, il secondo - nella seconda, e il terzo e il quarto - occupino la 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;
}

Vedi anche

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