A grid-row-end tulajdonság

A grid-row-end tulajdonság megadja egy elem végső pozícióját a gridben vagy rácsban a sorok mentén. A tulajdonság értéke lehet pozitív vagy negatív szám. Ha pozitív számot adunk meg, akkor az elem kezdő pozíciója felülről lefelé számolódik. Negatív szám megadása esetén az elem fordított sorrendben helyezkedik el, azaz alulról felfelé.

Szintaxis

szelektor {
	grid-row-end: pozitív vagy negatív szám;
}

Példa

Adjunk meg a gridelemeknek végpozíciókat:

<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;
	grid-row-end: 2;
}
#elem2 {
	grid-row-start: 2;
	grid-row-end: 3;
}
#elem3 {
	grid-row-start: 3;
	grid-row-end: 4;
}

Példa

Tegyük úgy, hogy az első blokk két sort foglaljon el:

<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élda

Most rendeljünk a negyedik blokkhoz három sort:

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

Példa

Most pedig a grid-row-start és a grid-row-end tulajdonságokban adjunk meg negatív számokat. Most a elem3 fogja a legfelső sort elfoglalni, a elem1 pedig a legalsót:

<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;
	grid-row-end: -2;
}
#elem2 {
	grid-row-start: -2;
	grid-row-end: -3;
}
#elem3 {
	grid-row-start: -3;
	grid-row-end: -4;
}

Lásd még

a grid-row-start tulajdonság,
amely megadja egy elem kezdő pozícióját a gridben a sorok mentén
a grid-row tulajdonság,
amely megadja egy elem kezdő és végső pozícióját a gridben a sorok mentén
a grid-template-rows tulajdonság,
amely megadja a sorok számát és szélességét a gridben
a grid-auto-rows tulajdonság,
amely megadja a sorok számát és szélességét az implicit gridben