Mise en page en mosaïque avec largeur automatique des blocs en CSS

Dans la leçon précédente, dans notre mise en page en mosaïque, il fallait que la largeur des éléments et de leurs marges additionnées donne exactement la largeur du parent. Cela n'est pas très universel. Faisons en sorte que les éléments s'adaptent automatiquement à la largeur du parent.

Supposons que nous ayons un parent comme celui-ci :

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Supposons que les éléments de cette mosaïque soient à 4 blocs par ligne :

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Définissons la largeur de nos blocs de manière à ce que chacun d'entre eux occupe un quart du parent. Pour cela, réglons leur taille sur 25% :

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Définissez la largeur des blocs en pourcentage de manière à ce que la mosaïque passe à trois blocs par ligne.

Définissez la largeur des blocs en pourcentage de manière à ce que la mosaïque passe à deux blocs par ligne.

Définissez la largeur des blocs en pourcentage de manière à ce que la mosaïque passe à un seul bloc par ligne.