Właściwość grid-row-start

Właściwość grid-row-start ustawia początkową pozycję elementu w siatce (grid) wzdłuż rzędów. Wartością właściwości może być liczba dodatnia lub ujemna. Jeśli podamy liczbę dodatnią, to początkowa pozycja elementu jest liczona od góry do dołu. Przy podaniu liczby ujemnej element będzie umieszczony w odwrotnej kolejności, czyli od dołu do góry.

Składnia

selektor {
	grid-row-start: liczba dodatnia lub ujemna;
}

Przykład

Ustawmy elementom w siatce początkowe pozycje:

<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;
}

Przykład

A teraz ustawmy we właściwości grid-row-start liczby ujemne. Teraz elem3 będzie zajmował najwyższy rząd, a elem1 - najniższy:

<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;
}

Przykład

Sprawmy, aby pierwszy blok zajmował dwa rzędy. Do tego potrzebujemy połączyć właściwości grid-row-start i 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;
}

Przykład

Teraz przypiszmy czwartemu blokowi trzy rzędy:

<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;
}

Zobacz też

właściwość grid-row-end,
która ustawia końcową pozycję elementu w siatce wzdłuż rzędów
właściwość grid-row,
która ustawia początkową i końcową pozycję elementu w siatce wzdłuż rzędów
właściwość grid-template-rows,
która ustawia liczbę i szerokość rzędów w siatce
właściwość grid-auto-rows,
która ustawia liczbę i szerokość rzędów w niejawniej siatce