අලවා තබන ලද CSS Grid

Grid පද්ධතිය තුළ, ඔබේම සාදන ලද ජාලකය තුළ නව අලවා තබන ලද grid එකක් එක් කිරීමේ හැකියාව ඇත. අලවා තබන ලද grid අඩවි බ්ලොක් තුළ කුඩා අංග ස්ථානගත කිරීම සඳහා බහුලව භාවිතා වේ. මෙම හැකියාව භාවිතා කිරීම සඳහා, ඔබට දරු අංගය තුළම display ගුණාංගය grid අගයට සකසන්න.

උදාහරණයක් වශයෙන්, අපි grid එකේ එක් සෛලයක තවත් grid එකක් නිර්මාණය කරමු:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

ඔබට තීරු තුනකින් සකසා ඇති අංග පහකින් සමන්විත grid එකක් ඇතැයි සිතමු. දෙවන අංගය තුළ අලවා තබන ලද grid එකක් නිර්මාණය කරන්න, එය තුළ දරු අංග තුනක් ඇත.

පෙර ගැටලුව වෙනස් කරන්න එවිට අලවා තබන ලද grid එක තුළ දරු අංග පහක් ඇත.

පළමු සහ තෙවන අංගවල දරු අංග තුනක් සහිත අලවා තබන ලද grid එක බැගින් නිර්මාණය කරන්න.