Indentations dans un carrelage avec largeur automatique des blocs en CSS

Supposons que nous ayons un carrelage de quatre blocs par rangée :

.child {
	width: 25%;
}

Ajoutons à nos blocs des marges en pourcentage horizontalement et verticalement :

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

Pour l'instant, ce que nous avons fait ne fonctionnera pas correctement, car la largeur totale des blocs et des marges est supérieure à 100%. Pour un fonctionnement correct nous devons retirer à chaque bloc une certaine partie, pour faire de la place pour nos marges. Calculons ces parties.

Dans notre cas, il s'avère qu'il y a quatre blocs, et entre eux trois marges - d'un pourcent et demi chacune. Pour calculer la partie à retirer, il faut diviser la marge totale par le nombre de blocs :

1.5% * 3 / 4 = 1.125

Alors la largeur de chaque bloc sera égale à :

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

Le code suivant en résultera :

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

On peut ne pas calculer cette marge nous-mêmes, et déléguer le travail de calcul à la fonction calc :

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

Laissons également la fonction calc calculer la largeur du bloc :

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

Définissez la largeur des blocs en pourcentages de sorte que le carrelage ait trois blocs par rangée, avec une distance de 3% entre eux.

Définissez la largeur des blocs en pourcentages de sorte que le carrelage ait six blocs par rangée, avec une distance de 0.5% entre eux.

Définissez la largeur des blocs en pourcentages de sorte que le carrelage ait quatre blocs par rangée, avec une distance de 30px entre les blocs.

Définissez la largeur des blocs en pourcentages de sorte que le carrelage ait cinq blocs par rangée, avec une distance de 50px entre les blocs.