Alammitrud CSS-is

Alammitter on pesastatud mitme variatsioon, kuid erinevalt sellest mõjutab see vanemmittekonteineri suurust. Selleks, et määrata alammitter, tuleb lapseelemendis ise määrata omadus display väärtusega subgrid.

Näiteks loome neljandas elemendis pesastatud mitra:

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

Oletagem, et teil on mitter, mis koosneb viiest elemendist, paigutatud kahte veerusse. Looge kolmandas elemendis pesastatud mitter, milles omakorda on kaks lasteelementi.

Muutke eelmist ülesannet nii, et pesastatud mitres oleks neli lasteelementi.

Looge kaks pesastatud mitret - teises elemendis ja viiendates elementides.