Sammanfogning av rader i CSS-grid

Rader och kolumner i grid bildar ett nät. Man kan göra så att ett element tar upp inte en cell i nätet, utan flera.

För att ett element ska ta upp mer än en rad, bör det tilldelas egenskapen grid-row. I denna egenskap anges siffror gennem ett snedstreck som indikerar start- och slutposition för elementen i griden.

Elementet kommer då att sträcka sig från den första positionen till den andra positionen (utan att inkludera den). Det vill säga värdet 1 / 2 kommer att få elementet att ta upp den första cellen, och värdet 1 / 3 kommer att få elementet att ta upp den första och andra cellen (men inte inkludera den tredje).

Exempel

Låt oss säga att vi har ett grid med tre barnelement. Låt oss placera dem så att det första elementet tar upp två 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; /* två rader */
}
#elem2 {
	grid-row: 1 / 2;
}
#elem3 {
	grid-row: 2 / 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: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
}
#elem4 {
	grid-row: 1 / 4;
}

Praktiska uppgifter

Placera alla element och utför sammanfogning av rader i enlighet med följande exempel: