Egenskapen grid-row-start

Egenskapen grid-row-start anger startpositionen för ett element i ett grid eller ett nät utifrån rader. Värdet på egenskapen kan vara ett positivt eller negativt tal. Om vi anger ett positivt tal, räknas elementets startposition från toppen och nedåt. Vid angivande av ett negativt tal kommer elementet att placeras i omvänd ordning, d.v.s. från botten till toppen.

Syntax

selektor {
	grid-row-start: positivt eller negativt tal;
}

Exempel

Låt oss ange startpositioner för elementen i griddet:

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

Exempel

Och låt oss nu i egenskapen grid-row-start ange negativa tal. Nu kommer elem3 att uppta den översta raden, och elem1 - den nedersta raden:

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

Exempel

Låt oss göra så att det första blocket upptar två rader. För att göra detta behöver vi kombinera egenskaperna grid-row-start och grid-row-end:

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

Exempel

Låt oss nu tilldela det fjärde blocket tre rader:

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

Se även

egenskapen grid-row-end,
som anger slutpositionen för ett element i ett grid utifrån rader
egenskapen grid-row,
som anger start- och slutposition för ett element i ett grid utifrån rader
egenskapen grid-template-rows,
som anger antalet och bredden på rader i ett grid
egenskapen grid-auto-rows,
som anger antalet och bredden på rader i ett implicit grid