A grid-row-start tulajdonság

A grid-row-start tulajdonság megadja egy elem kezdő 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 fog elhelyezkedni, azaz alulról felfelé.

Szintaxis

selector {
	grid-row-start: pozitív vagy negatív szám;
}

Példa

Adjunk meg a gridelemeknek kezdő pozí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;
}
#elem2 {
	grid-row-start: 2;
}
#elem3 {
	grid-row-start: 3;
}

Példa

Most pedig adjunk meg negatív számokat a grid-row-start tulajdonságnál. Most a elem3 a legfelső sort fogja 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;
}
#elem2 {
	grid-row-start: -2;
}
#elem3 {
	grid-row-start: -3;
}

Példa

Tegyük úgy, hogy az első blokk két sort foglaljon el. Ehhez kombinálnunk kell a grid-row-start és a grid-row-end tulajdonságokat:

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

Lásd még

a grid-row-end tulajdonság,
amely megadja egy elem végső 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