Vlastnosť grid-row-start

Vlastnosť grid-row-start nastavuje počiatočnú pozíciu prvku v gride alebo mriežke podľa riadkov. Hodnotou vlastnosti môže byť kladné alebo záporné číslo. Ak zadáme kladné číslo, počiatočná pozícia prvku sa počíta zhora nadol. Pri zadaní záporného člena sa prvok umiestni v opačnom poradí, t.j. zdola nahor.

Syntax

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

Príklad

Nastavme prvkom v gride počiatočné 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;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Príklad

A teraz zadajme do vlastnosti grid-row-start záporné čísla. Teraz bude elem3 zaberáť najvrchnejší riadok a elem1 - ten 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;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Príklad

Urobme tak, aby prvý blok zaberal dva riadky. Na to budeme potrebovať skombinovať vlastnosti grid-row-start a 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;
}

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

Pozrite tiež

vlastnosť grid-row-end,
ktorá nastavuje konečnú pozíciu prvku v gride podľa riadkov
vlastnosť grid-row,
ktorá nastavuje počiatočnú a konečnú pozíciu prvku v gride podľa riadkov
vlastnosť grid-template-rows,
ktorá nastavuje počet a šírku riadkov v gride
vlastnosť grid-auto-rows,
ktorá nastavuje počet a šírku riadkov v implicitnom gride