Eienskap grid-row-start

Die eienskap grid-row-start spesifiseer die beginposisie van 'n element in 'n rooster volgens rye. Die waarde van die eienskap kan 'n positiewe of negatiewe getal wees. As ons 'n positiewe getal spesifiseer, dan word die beginposisie van die element van bo na onder getel. As 'n negatiewe getal gespesifiseer word, sal die element in omgekeerde volgorde geplaas word, d.w.s. van onder na bo.

Sintaksis

selektor {
	grid-row-start: positiewe of negatiewe getal;
}

Voorbeeld

Kom ons spesifiseer beginposisies vir elemente in 'n rooster:

<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

En nou, laat ons negatiewe getalle in die eienskap grid-row-start spesifiseer. Nou sal elem3 die boonste ry inneem, en elem1 - die onderste een:

<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

Laat ons die eerste blok twee rye laat inneem. Hiervoor sal ons die eienskappe grid-row-start en grid-row-end moet kombineer:

<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

Nou laat ons die vierde blok drie rye toewys:

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

Sien ook

die eienskap grid-row-end,
wat die eindposisie van 'n element in 'n rooster volgens rye spesifiseer
die eienskap grid-row,
wat die begin- en eindposisies van 'n element in 'n rooster volgens rye spesifiseer
die eienskap grid-template-rows,
wat die aantal en breedte van rye in 'n rooster spesifiseer
die eienskap grid-auto-rows,
wat die aantal en breedte van rye in 'n implisiete rooster spesifiseer