Eigenschap grid-row-start

De eigenschap grid-row-start bepaalt de startpositie van een element in het grid per rij. De waarde van de eigenschap kan een positief of negatief getal zijn. Als we een positief getal opgeven, wordt de startpositie van het element van boven naar beneden geteld. Bij het opgeven van een negatief getal wordt het element in omgekeerde volgorde geplaatst, d.w.z. van onder naar boven.

Syntaxis

selector {
	grid-row-start: positief of negatief getal;
}

Voorbeeld

Laten we de startposities instellen voor elementen in het grid:

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

Voorbeeld

Laten we nu negatieve getallen opgeven in de eigenschap grid-row-start. Nu zal elem3 de bovenste rij innemen, en elem1 - de onderste rij:

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

Voorbeeld

Laten we het eerste blok twee rijen laten innemen. Hiervoor moeten we de eigenschappen grid-row-start en grid-row-end combineren:

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

Voorbeeld

Laten we nu het vierde blok drie rijen toewijzen:

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

Zie ook

eigenschap grid-row-end,
die de eindpositie van een element in het grid per rij bepaalt
eigenschap grid-row,
die de start- en eindposities van een element in het grid per rij bepaalt
eigenschap grid-template-rows,
die het aantal en de breedte van rijen in het grid bepaalt
eigenschap grid-auto-rows,
die het aantal en de breedte van rijen in het impliciete grid bepaalt