Sammenligning av rader i CSS-grid

Rader og kolonner i grid danner et rutenett. Det er mulig å gjøre at et element opptar ikke bare én rutenettcelle, men flere.

For at et element skal oppta mer enn én rad, bør det tildeles egenskapen grid-row. I denne egenskapen angis det tall, skilt med skråstrek, som indikerer start- og sluttposisjonen for elementene i griddet.

Elementet vil strekke seg fra den første posisjonen til den andre posisjonen (uten å inkludere den). Det vil si at verdien 1 / 2 vil føre til at elementet opptar den første cellen, mens verdien 1 / 3 vil føre til at elementet opptar den første og andre cellen (men ikke den tredje).

Eksempel

La oss si at vi har et grid med tre barneelementer. La oss plassere dem slik at det første elementet opptar to rader:

<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: 1 / 3; /* to rader */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 3;
}

Eksempel

La oss nå tildele tre rader til det fjerde elementet:

<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: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Praktiske oppgaver

Plasser alle elementene og utfør sammenligning av rader i samsvar med følgende eksempel: