Responsieve tegels met marges in CSS

Laten we nu tegels met marges maken. Hier is een voorbeeld van wat we zouden moeten krijgen:

Laten we eerst de stijlen voor de ouder van de blokken maken:

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

Laten we nu stijlen instellen voor de blokken zelf, zonder hun breedte in te stellen, maar wel met een onderste marge in procenten:

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

Laten we nu de code schrijven die vier blokken op een rij plaatst, met de bijbehorende marges:

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

En laten we nu drie blokken op een rij zetten:

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

En laten we nu twee blokken op een rij zetten:

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

Eén blok op een rij:

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

Laten we alle code samenvoegen:

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

Maak een tegel die, wanneer het scherm kleiner wordt, eerst acht elementen op een rij heeft, dan vier elementen op een rij, dan twee elementen op een rij. Laat de marge tussen de elementen 0.75% zijn.

Pas de vorige taak zo aan dat de marge tussen de elementen een vaste waarde van 20px is.