ჩადგმული CSS გრიდები

გრიდების სისტემაში არსებობს საშუალება, რომ თქვენს მიერ შექმნილ ბადეს დაემატოს ახალი ჩადგმული გრიდი. ჩადგმული გრიდები ფართოდ გამოიყენება საიტის ბლოკებში მცირე ელემენტების განლაგებისთვის. იმისათვის, რომ გამოიყენოთ ეს შესაძლებლობა, საჭიროა თავად შვილ ელემენტში დაუწეროთ თვისება display მნიშვნელობით 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;
}

დაე, თქვენ გაქვთ გრიდი, რომელიც შედგება ხუთი ელემენტისგან, განლაგებული სამ სვეტში. შექმენით მეორე ელემენტში ჩადგმული გრიდი, რომელშიც თავის მხრივ იქნება სამი შვილი ელემენტი.

შეცვალეთ წინა ამოცანა ისე, რომ ჩადგმულ გრიდში იყოს ხუთი შვილი ელემენტი.

შექმენით პირველ და მესამე ელემენტებში ჩადგმული გრიდი სამი შვილი ელემენტით.