Aliverkot CSS:ssä

Aliverkko on sisäkkäisen verkon muunnelma, mutta toisin kuin se, se vaikuttaa ylätason verkkosäiliön kokoon. Asettaaksesi aliverkon, sinun tulee asettaa lapsielementtiin ominaisuus display arvolla subgrid.

Esimerkkinä luodaan neljänteen elementtiin sisäkkäinen verkko:

<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: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Oletetaan, että sinulla on verkko, joka koostuu viidestä elementistä, jotka on sijoitettu kahteen sarakkeeseen. Luo kolmanteen elementtiin sisäkkäinen verkko, jossa on puolestaan kaksi lapsielementtiä.

Muokkaa edellistä tehtävää siten, että sisäkkäisessä verkossa on neljä lapsielementtiä.

Luo kaksi sisäkkäistä verkkoa - toiseen elementtiin ja viidenteen elementtiin.