Margens em layout de blocos com largura automática em CSS

Suponha que temos um layout de blocos com quatro elementos por linha:

.child {
	width: 25%;
}

Vamos adicionar margens horizontais e verticais, em porcentagem, aos nossos blocos:

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

Inicialmente, o que fizemos não funcionará corretamente, pois a largura total dos blocos mais as margens é maior que 100%. Para um funcionamento correto, precisamos subtrair uma parte de cada bloco para dar espaço às nossas margens. Vamos calcular essas partes.

No nosso caso, temos quatro blocos e três margens entre eles - de um ponto e meio por cento cada. Para calcular a parte a ser subtraída, é necessário dividir a margem total pelo número de blocos:

1.5% * 3 / 4 = 1.125

Então, a largura de cada bloco será:

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

O código resultante será:

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

Em vez de calcular essa margem manualmente, podemos delegar o cálculo para a função calc:

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

A largura do bloco também pode ser calculada pela função 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;
}

Defina a largura dos blocos em porcentagem para que o layout tenha três blocos por linha, com um espaçamento de 3% entre eles.

Defina a largura dos blocos em porcentagem para que o layout tenha seis blocos por linha, com um espaçamento de 0.5% entre eles.

Defina a largura dos blocos em porcentagem para que o layout tenha quatro blocos por linha, com um espaçamento de 30px entre os blocos.

Defina a largura dos blocos em porcentagem para que o layout tenha cinco blocos por linha, com um espaçamento de 50px entre os blocos.