Die Samevoeging van rye in CSS-roosters

Rye en kolomme vorm 'n rooster in roosters. Dit is moontlik om 'n element meer as een sel van die rooster te laat beslaan.

Om 'n element meer as een ry te laat beslaan, moet die grid-row eienskap aan dit toegeken word. In hierdie eienskap word die begin- en eindposisie van die element in die rooster met 'n skuinsstreep gespesifiseer.

Die element sal dan uitgestrek word vanaf die eerste posisie tot by die tweede posisie (laasgenoemde nie ingesluit nie). Dit beteken die waarde 1 / 2 sal die element een eerste sel laat beslaan, en die waarde 1 / 3 sal die element die eerste en tweede sel laat beslaan (maar nie die derde nie).

Voorbeeld

Kom ons neem 'n rooster met drie kind-elemente. Laat ons hulle so plaas dat die eerste element twee rye beslaan:

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

Voorbeeld

Laat ons nou die vierde blok drie rye toewys:

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

Praktiese take

Plaas alle elemente en voer die samevoeging van rye uit in ooreenstemming met die volgende voorbeeld: