Tuile adaptative avec espacements en CSS

Maintenant, créons une tuile avec des espacements. Voici un exemple de ce que nous devrions obtenir :

Pour commencer, créons les styles pour le parent des blocs :

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

Maintenant, définissons les styles pour les blocs eux-mêmes, sans définir leur largeur, mais en définissant une marge inférieure en pourcentage :

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

Maintenant, écrivons le code qui placera quatre blocs par ligne, en définissant les espacements correspondants :

@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Et maintenant, plaçons trois blocs par ligne :

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}

Et maintenant, plaçons deux blocs par ligne :

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

Un bloc par ligne :

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

Rassemblons maintenant tout le code :

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

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Créez une tuile qui, lors de la réduction de l'écran, aura d'abord huit éléments par ligne, puis quatre éléments par ligne, puis deux éléments par ligne. Laissez l'espacement entre les éléments être de 0.75%.

Modifiez la tâche précédente pour que l'espacement entre les éléments soit une valeur fixe de 20px.