Egenskapen grid-row-start

Egenskapen grid-row-start angir startposisjonen for et element i et grid langs radene. Verdien til egenskapen kan være et positivt eller negativt tall. Hvis vi setter et positivt tall, regnes startposisjonen for elementet ovenfra og ned. Ved å angi et negativt tall vil elementet plasseres i omvendt rekkefølge, dvs. nedenfra og opp.

Syntaks

velger {
	grid-row-start: positivt eller negativt tall;
}

Eksempel

La oss angi startposisjoner for elementene 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;
}

Eksempel

La oss nå i egenskapen grid-row-start angi negative tall. Nå vil elem3 ta den øverste raden, og elem1 - den nederste 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;
}

Eksempel

La oss gjøre slik at den første blokken tar to rader. For å gjøre dette trenger vi å kombinere egenskapene grid-row-start og 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;
}

Eksempel

La oss nå tildele tre rader til den fjerde blokken:

<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 også

egenskapen grid-row-end,
som angir sluttposisjonen for et element i et grid langs radene
egenskapen grid-row,
som angir start- og sluttposisjonene for et element i et grid langs radene
egenskapen grid-template-rows,
som angir antall og bredde på rader i et grid
egenskapen grid-auto-rows,
som angir antall og bredde på rader i et implisitt grid