Grilles implicites en CSS

Une grille implicite est créée automatiquement par le navigateur, lorsque le nombre d'éléments ne tient pas dans la grille explicite. Voyons comment cela se produit.

Supposons que nous ayons quatre blocs :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">4</div>
</div>

Supposons que notre grille ait des dimensions de 3 sur 3 :

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Plaçons trois de nos blocs sur la grille :

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

Et plaçons le quatrième bloc dans la quatrième ligne et colonne :

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Puisque notre grille a une taille de 3 sur 3, cette quatrième ligne et colonne n'existeront pas dans cette grille. Mais elles n'existeront pas de manière explicite, c'est-à-dire telles que nous les avons définies. Mais le navigateur les créera de manière implicite, c'est-à-dire de lui-même.

Dans ce cas, puisque nous n'avons spécifié les dimensions que pour la grille explicite, les dimensions pour les cellules en dehors de cette grille seront calculées par le navigateur. C'est-à-dire que dans notre cas, les dimensions du quatrième bloc seront définies automatiquement par le navigateur.

Voyons ce que nous obtenons :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Supposons que votre grille contienne 6 blocs. Placez 3 blocs dans la grille explicite, et trois blocs dans la grille implicite.