Vnorené CSS gridy

V systéme grid existuje možnosť pridať do vlastnej vytvorenej siete nový vnorený grid. Vnorené gridy sa široko používajú pri umiestňovaní malých elementov vo vnútri blokov stránky. Aby sme mohli túto možnosť využiť, musíme v samotnom podradenom elemente nastaviť vlastnosť display s hodnotou grid.

Pre príklad si v jednej z buniek gridu vytvorme ďalší 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;
}

Majte grid pozostávajúci z piatich elementov, umiestnených v troch stĺpcoch. Vytvorte v druhom elemente vnorený grid, v ktorom sa bude nachádzať tri podradené elementy.

Zmeňte predchádzajúcu úlhu tak, aby sa vo vnorenom gride nachádzalo päť podradených elementov.

Vytvorte v prvom a treťom elemente vnorený grid s tromi podradenými elementami.