Sottogriglie in CSS

La sottogriglia è una variante della griglia annidata, ma a differenza di essa, influisce sulle dimensioni della griglia del contenitore genitore. Per impostare una sottogriglia è necessario nell'elemento figlio stesso impostare la proprietà display con il valore subgrid.

Ad esempio, creiamo una griglia annidata nel quarto elemento:

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

Supponiamo che tu abbia una griglia composta da cinque elementi, disposti in due colonne. Crea nel terzo elemento una griglia annidata, che a sua volta avrà due elementi figli.

Modifica l'attività precedente in modo che nella griglia annidata ci siano quattro elementi figli.

Crea due griglie annidate - nel secondo elemento e nel quinto elemento.