Mosaico adaptable con márgenes en CSS

Ahora vamos a crear un mosaico con márgenes. Este es un ejemplo de lo que deberíamos obtener:

Primero creemos los estilos para el contenedor padre:

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

Ahora definamos los estilos para los bloques mismos, sin establecer su ancho, pero estableciendo un margen inferior en porcentaje:

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

Ahora escribamos el código que colocará cuatro bloques en una fila, estableciendo los márgenes correspondientes:

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

Y ahora pongamos tres bloques en una fila:

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

Y ahora pongamos dos bloques en una fila:

@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 bloque por fila:

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

Juntemos todo el código:

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

Cree un mosaico que al reducir la pantalla tenga primero ocho elementos en una fila, luego cuatro elementos en una fila, luego dos elementos en una fila. Que el margen entre elementos sea 0.75%.

Modifique la tarea anterior para que el margen entre elementos sea un valor fijo de 20px.