Īpašība grid-row

Īpašība grid-row norāda elementa sākuma un beigu pozīcijas režģī vai sietā pa rindām. Īpašības vērtības var būt pozitīvi vai negatīvi skaitļi, norādīti ar slīpsvītru. Pirmais skaitlis apzīmē elementa sākuma pozīciju, otrais - beigu pozīciju. Ja kā vērtību norādām pozitīvu skaitli, tad elementa 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: sākuma pozīcija / beigu pozīcija;
}

Piemērs

Piešķirsim elementiem režģī sākuma un beigu 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;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}

Piemērs

Tagad īpašībā grid-row norādīsim negatīvus skaitļus:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: -1 / -2;
}
#elem2 {
	grid-row: -2 / -3;
}
#elem3 {
	grid-row: -3 / -4;
}

Piemērs

Padarīsim, lai pirmais bloks aizņemtu divas rindas:

<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: 1 / 3; /* divas rindas */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 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: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Piemērs

Kombinēsim īpašības grid-row un grid-column:

<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 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 3;
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 1 / 2;
}
#elem4 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}

Piemērs

Tagad padarīsim tā, lai pirmais un piektais bloki aizņemtu visu rindu, otrais bloks - divas rindas un divas kolonnas, bet trešais un ceturtais bloki - vienu rindu un divas kolonnas:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	height: 300px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 4;
}
#elem2 {
	grid-row: 2 / 4;
	grid-column: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
	grid-column: 2 / 4;
}
#elem4 {
	grid-row: 3 / 3;
	grid-column: 2 / 4;
}
#elem5 {
	grid-row: 4 / 5;
	grid-column: 1 / 4;
}

Skatiet arī

īpašība grid-column,
kas norāda elementa sākuma un beigu pozīcijas režģī pa kolonnām
īpašība grid-row-start,
kas norāda elementa sākuma pozīciju režģī pa rindām
īpašība grid-row-end,
kas norāda elementa beigu pozīciju režģī pa rindām