Īpašība grid-row-start

Īpašība grid-row-start nosaka elementa sākuma pozīciju režģī vai tīklā pa rindām. Īpašības vērtība var būt pozitīvs vai negatīvs skaitlis. Ja mēs norādām pozitīvu skaitli, tad elementa sākuma pozīcija tiek skaitīta no augšas uz leju. Norādot negatīvu skaitli, elements tiks novietots apgrieztā secībā, t.i., no apakšas uz augšu.

Sintakse

selektors {
	grid-row-start: pozitīvs vai negatīvs skaitlis;
}

Piemērs

Piešķirsim elementiem režģī sākuma pozīcijas:

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

Piemērs

Tagad īpašībā grid-row-start norādīsim negatīvus skaitļus. Tagad elem3 ieņems augšējo rindu, bet elem1 - apakšējo rindu:

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

Piemērs

Padarīsim tā, lai pirmais bloks aizņemtu divas rindas. Lai to izdarītu, mums būs jāapvieno īpašības grid-row-start un 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;
}

Piemērs

Tagad piešķirsim ceturtajam blokam trīs rindas:

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

Skatiet arī

īpašība grid-row-end,
kas nosaka elementa beigu pozīciju režģī pa rindām
īpašība grid-row,
kas nosaka elementa sākuma un beigu pozīcijas režģī pa rindām
īpašība grid-template-rows,
kas nosaka rindu skaitu un platumu režģī
īpašība grid-auto-rows,
kas nosaka rindu skaitu un platumu netiešajā režģī