Mosaico adaptable sin márgenes en CSS

Hagamos un mosaico que tenga un número diferente de bloques por fila dependiendo del ancho de la pantalla. Aquí hay un ejemplo de lo que deberíamos obtener:

Escribamos primero el código 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>

Ahora agreguemos estilos al padre de los bloques:

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

Ahora establezcamos los estilos para los bloques mismos, sin asignarles ancho:

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

Obviamente, el ancho de los bloques debe ser en porcentajes, para que al cambiar la pantalla los bloques cambien su ancho suavemente. Al mismo tiempo, en ciertos puntos de la pantalla debemos cambiar el ancho de los bloques para que quepa un número determinado de estos bloques en una fila.

Escribamos el código que colocará cuatro bloques en una fila:

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

Y ahora pongamos tres bloques en una fila:

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

Y ahora pongamos dos bloques en una fila:

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

Un bloque por fila:

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

Recopilemos todo el código:

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

Modifique mi código para que el ancho de los bloques se calcule mediante la función calc.

Cree un mosaico que al reducir la pantalla tenga primero cuatro elementos por fila, luego dos elementos por fila, y luego un elemento por fila.

Cree un mosaico que al reducir la pantalla tenga primero seis elementos por fila, luego tres elementos por fila, y luego un elemento por fila.