Sangrías en mosaicos con ancho automático de bloques en CSS

Supongamos que tenemos un mosaico de cuatro bloques por fila:

.child {
	width: 25%;
}

Añadamos márgenes horizontales y verticales a nuestros bloques en porcentajes:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Por ahora, lo que hemos hecho no funcionará correctamente, ya que el ancho total de los bloques y los márgenes es mayor que 100%. Para que funcione correctamente debemos quitar a cada bloque una cierta parte, para dejar espacio para nuestros márgenes. Calculemos estas partes.

En nuestro caso, resulta que hay cuatro bloques, y entre ellos tres márgenes - de uno punto cinco por ciento cada uno. Para calcular la parte a restar, necesitamos dividir el margen total por el número de bloques:

1.5% * 3 / 4 = 1.125

Entonces el ancho de cada bloque será:

25% - 1.5% * 3 / 4 = 23.875%

El código resultante es el siguiente:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Podemos no calcular este margen nosotros mismos, sino delegar el trabajo de cálculo a la función calc:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Que el ancho del bloque también lo calcule la función calc:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Establezca el ancho de los bloques en porcentajes para que el mosaico tenga tres bloques por fila, y entre ellos un espacio de 3%.

Establezca el ancho de los bloques en porcentajes para que el mosaico tenga seis bloques por fila, y entre ellos un espacio de 0.5%.

Establezca el ancho de los bloques en porcentajes para que el mosaico tenga cuatro bloques por fila, y entre los bloques haya un espacio de 30px.

Establezca el ancho de los bloques en porcentajes para que el mosaico tenga cinco bloques por fila, y entre los bloques haya un espacio de 50px.