Kuunganisha Safu kwenye Gridi za CSS

Safu na nguzo kwenye gridi huunda wavu. Inawezekana kufanya kipengele kichukue si kiini kimoja tu la wavu, bali kadhaa.

Ili kipengele kichukue zaidi ya safu moja, inapaswa kupewa sifa grid-row. Katika sifa hii, nambari huwekwa kupitia kona (/), zikionyesha nafasi ya kuanzia na ya mwisho ya vipengele kwenye gridi.

Wakati huo, kipengele kitatanuka kutoka nafasi ya kwanza hadi nafasi ya pili (bila kujumuisha ile ya pili). Hii inamaanisha thamani 1 / 2 itamlazimisha kipengele kuchukua kiini cha kwanza kimoja tu, na thamani 1 / 3 itamlazimisha kipengele kuchukua kiini cha kwanza na cha pili (lakini bila kujumuisha cha tatu).

Mfano

Tuchukulie tuna gridi yenye vipengele vitatu vya mtoto. Acha tuwaweke kwa namna ambayo kipengele cha kwanza kitachukua safu mbili:

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

Mfano

Sasa tumpatie kipengele cha nne safu tatu:

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

Kazi za Vitendo

Weka vipengele vyote na utimize kuunganisha safu kwa kulingana na mfano ufuatao: