Vlastnosť grid-row-end

Vlastnosť grid-row-end určuje koncovú pozíciu prvku v grid layoute alebo mriežke pozdĺž riadkov. Hodnotou vlastnosti môže byť kladné alebo záporné číslo. Ak zadáme kladné číslo, tak počiatočná pozícia prvku sa počíta zhora dole. Pri zadaní záporného člena sa prvok umiestni v opačnom poradí, t.j. zdola nahor.

Syntax

selektor {
	grid-row-end: kladné alebo záporné číslo;
}

Príklad

Nastavme prvkom v gride koncové pozície:

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

Príklad

Urobme tak, aby prvý blok zaberal dva riadky:

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

Príklad

Teraz priraďme štvrtému bloku tri riadky:

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

Príklad

A teraz zadajme vo vlastnostiach grid-row-start a grid-row-end záporné čísla. Teraz bude elem3 zaberať najvrchnejší riadok a elem1 - najspodnejší:

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

Pozrite tiež

vlastnosť grid-row-start,
ktorá určuje počiatočnú pozíciu prvku v gride pozdĺž riadkov
vlastnosť grid-row,
ktorá určuje počiatočnú a koncovú pozíciu prvku v gride pozdĺž riadkov
vlastnosť grid-template-rows,
ktorá určuje počet a šírku riadkov v gride
vlastnosť grid-auto-rows,
ktorá určuje počet a šírku riadkov v implicitnom gride