Svojstvo grid-row-start

Svojstvo grid-row-start određuje početnu poziciju elementa u Grid-u ili mreži po redovima. Vrednost svojstva može biti pozitivan ili negativan broj. Ako postavimo pozitivan broj, tada se početna pozicija elementa broji odozgo na dole. Kada se navede negativan broj, element će se pozicionirati obrnutim redosledom, odnosno odozdo na gore.

Sintaksa

selektor {
	grid-row-start: pozitivan ili negativan broj;
}

Primer

Hajde da postavimo elementima u Grid-u početne pozicije:

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

Primer

A sada hajde da u svojstvu grid-row-start navedemo negativne brojeve. Sada će elem3 zauzimati najgornji red, a elem1 - najdonji:

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

Primer

Učinimo da prvi blok zauzima dva reda. Za to će nam trebati da kombinujemo svojstva 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;
}

Primer

Sada hajde da dodelimo četvrtom bloku tri reda:

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

Pogledajte takođe

svojstvo grid-row-end,
koje postavlja krajnju poziciju elementa u Grid-u po redovima
svojstvo grid-row,
koje postavlja početnu i krajnju poziciju elementa u Grid-u po redovima
svojstvo grid-template-rows,
koje određuje broj i širinu redova u Grid-u
svojstvo grid-auto-rows,
koje određuje broj i širinu redova u implicitnom Grid-u