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

Właściwość grid-row-end ustawia końcową 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-end: liczba dodatnia lub ujemna;
}

Przykład

Ustawmy elementom w siatce grid końcowe 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;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}

Przykład

Sprawmy, aby pierwszy blok zajmował dwa rzędy:

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

Przykład

A teraz we właściwościach grid-row-start i grid-row-end podajmy 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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

Zobacz też

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