Sammenlægning af rækker i CSS-grid

Rækker og kolonner i grids danner et gitter. Man kan gøre så et element optager ikke kun en celle i gitteret, men flere.

For at et element skal optage mere end én række, skal det tildeles egenskaben grid-row. I denne egenskab angives tal adskilt af skråstreg, der angiver start- og slutposition for elementerne i griddet.

Elementet vil strække sig fra den første position til den anden position (uden at inkludere den sidste). Det vil sige værdien 1 / 2 vil få elementet til at optage den første celle, og værdien 1 / 3 vil få elementet til at optage den første og anden celle (men uden at inkludere den tredje).

Eksempel

Lad os sige, at vi har et grid med tre underordnede elementer. Lad os placere dem så det første element optager to rækker:

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

Eksempel

Lad os nu tildele den fjerde blok tre rækker:

<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 opgaver

Placer alle elementer og udfør sammenlægning af rækker i overensstemmelse med følgende eksempel: