Sisäkkäiset CSS-gridit

Grid-järjestelmässä on mahdollista lisätä luomaasi verkkoon uusi sisäkkäinen grid. Sisäkkäisiä gridejä käytetään laajasti pienten elementtien sijoittamiseen sivuston lohkojen sisällä. Jotta voit hyödyntää tätä mahdollisuutta, sinun tulee asettaa lapsielementtiin display-ominaisuus arvolla grid.

Esimerkkinä luodaan yhteen gridin soluista toinen 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;
}

Oletetaan, että sinulla on grid, joka koostuu viidestä elementistä, jotka on sijoitettu kolmeen sarakkeeseen. Luo toiseen elementtiin sisäkkäinen grid, jossa on puolestaan kolme lapsielementtiä.

Muokkaa edellistä tehtävää siten, että sisäkkäisessä gridissä on viisi lapsielementtiä.

Luo ensimmäiseen ja kolmanteen elementtiin kumpaankin sisäkkäinen grid, jossa on kolme lapsielementtiä.