Proprietà grid-row-start

La proprietà grid-row-start definisce la posizione iniziale di un elemento nella griglia lungo le righe. Il valore della proprietà può essere un numero positivo o negativo. Se specifichiamo un numero positivo, la posizione iniziale dell'elemento viene contata dall'alto verso il basso. Specificando un numero negativo, l'elemento sarà posizionato in ordine inverso, cioè dal basso verso l'alto.

Sintassi

selettore {
	grid-row-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;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Esempio

Ora specifichiamo numeri negativi nella proprietà grid-row-start. Ora elem3 occuperà la riga più in alto, mentre elem1 - quella più in basso:

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

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

Esempio

Facciamo in modo che il primo blocco occupi due righe. Per fare questo, avremo bisogno di combinare le proprietà grid-row-start e grid-row-end:

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

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 3;
}
#elem2 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem3 {
	grid-row-start: 2;
	grid-row-end: 3;
}

Esempio

Ora assegniamo al quarto blocco tre righe:

<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;
	grid-template-columns: 2fr 1fr;
	height: 300px;
	width: 400px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row-start: 1;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}
#elem4 {
	grid-row-start: 1;
	grid-row-end: 4;
}

Vedi anche

la proprietà grid-row-end,
che definisce la posizione finale dell'elemento nella griglia lungo le righe
la proprietà grid-row,
che definisce le posizioni iniziale e finale dell'elemento nella griglia lungo le righe
la proprietà grid-template-rows,
che definisce il numero e la larghezza delle righe nella griglia
la proprietà grid-auto-rows,
che definisce il numero e la larghezza delle righe nella griglia implicita