Savybė grid-row

Savybė grid-row nustato pradinę ir galinę elemento poziciją tinklelyje arba gardelėje pagal eilutes. Savybės reikšmėmis gali būti teigiami arba neigiami skaičiai, nurodyti per pasvirąją brūkšnį. Pirmasis skaičius žymi pradinę elemento poziciją, antrasis - galinę poziciją. Jei kaip reikšmę nurodome teigiamą skaičių, tai elemento pozicija skaičiuojama iš viršaus į apačią. Nurodžius neigiamą skaičių elementas bus išdėstytas atvirkštine tvarka, t.y. iš apačios į viršų.

Sintaksė

selektorius {
	grid-row: pradinė pozicija / galinė pozicija;
}

Pavyzdys

Suteikime elementams tinklelyje pradines ir galines pozicijas:

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

Pavyzdys

O dabar savybėje grid-row nurodykime neigiamus skaičius:

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

Pavyzdys

Padarykime taip, kad pirmasis blokas užimtų dvi eilutes:

<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; /* dvi eilutės */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Pavyzdys

Dabar suteikime ketvirtajam blokui tris eilutes:

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

Pavyzdys

Sujungkime savybes grid-row ir 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;
}

Pavyzdys

O dabar padarykime taip, kad pirmasis ir penktasis blokai užimtų visą eilutę, antrasis blokas - dvi eilutes ir du stulpelius, o trečiasis ir ketvirtasis blokai - vieną eilutę ir du stulpelius:

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

Taip pat žiūrėkite

savybė grid-column,
kuri nustato pradinę ir galinę elemento pozicijas tinklelyje pagal stulpelius
savybė grid-row-start,
kuri nustato pradinę elemento poziciją tinklelyje pagal eilutes
savybė grid-row-end,
kuri nustato galinę elemento poziciją tinklelyje pagal eilutes