Mosaïque adaptative sans espaces en CSS

Créons une mosaïque qui aura un nombre variable de blocs par rangée en fonction de la largeur de l'écran. Voici un exemple de ce que nous devrions obtenir :

Écrivons d'abord le code HTML :

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Ajoutons maintenant les styles au parent des blocs :

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Maintenant, définissons les styles des blocs eux-mêmes, sans leur donner de largeur :

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

Il est évident que la largeur des blocs doit être en pourcentage, afin que les blocs modifient leur largeur fluidement lorsque l'écran change. En même temps, à certains points de rupture de l'écran, nous devons changer la largeur des blocs de manière à ce qu'un certain nombre de ces blocs tiennent sur une ligne.

Écrivons le code qui placera quatre blocs sur une ligne :

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Et maintenant, plaçons trois blocs sur une ligne :

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Et maintenant, plaçons deux blocs sur une ligne :

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

Un bloc par ligne :

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Rassemblons tout le code :

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Modifiez mon code pour que la largeur des blocs soit calculée via la fonction calc.

Créez une mosaïque qui, lorsque l'écran rétrécit, affichera d'abord quatre éléments par ligne, puis deux éléments par ligne, et enfin un élément par ligne.

Créez une mosaïque qui, lorsque l'écran rétrécit, affichera d'abord six éléments par ligne, puis trois éléments par ligne, et enfin un élément par ligne.