Vlastnost grid-row-start

Vlastnost grid-row-start nastavuje počáteční pozici prvku v gridu nebo mřížce podle řádků. Hodnotou vlastnosti může být kladné nebo záporné číslo. Pokud zadáme kladné číslo, počáteční pozice prvku se počítá shora dolů. Při zadání záporného číslo se prvek umístí v opačném pořadí, tj. zdola nahoru.

Syntaxe

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

Příklad

Nastavme prvkům v gridu počáteční pozice:

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

Příklad

A nyní zadejme ve vlastnosti grid-row-start záporná čísla. Nyní bude elem3 zaujímat nejhornější řádek a elem1 - nejspodnější:

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

Příklad

Uděláme tak, aby první blok zaujímal dva řádky. K tomu budeme potřebovat zkombinovat 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;
}

Příklad

Nyní přiřaďme čtvrtému bloku tři řádky:

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

Viz také

vlastnost grid-row-end,
která nastavuje koncovou pozici prvku v gridu podle řádků
vlastnost grid-row,
která nastavuje počáteční a koncovou pozici prvku v gridu podle řádků
vlastnost grid-template-rows,
která nastavuje počet a šířku řádků v gridu
vlastnost grid-auto-rows,
která nastavuje počet a šířku řádků v implicitním gridu