Grilles CSS imbriquées

Le système de grille permet d'ajouter une nouvelle grille imbriquée dans sa propre grille créée. Les grilles imbriquées sont largement utilisées pour placer de petits éléments à l'intérieur des blocs d'un site. Pour utiliser cette fonctionnalité, il faut définir la propriété display avec la valeur grid dans l'élément enfant lui-même.

Par exemple, créons une autre grille dans l'une des cellules de la grille :

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

Supposons que vous ayez une grille composée de cinq éléments, disposés sur trois colonnes. Créez dans le deuxième élément une grille imbriquée, qui contiendra à son tour trois éléments enfants.

Modifiez la tâche précédente pour que la grille imbriquée contienne cinq éléments enfants.

Créez dans les premier et troisième éléments chacune une grille imbriquée avec trois éléments enfants.