Indentations dans un carrelage avec largeur automatique des blocs en CSS

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

css.child {
  width: 25%;
}

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

css.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 :

Alors la largeur de chaque bloc sera égale à :

Le code suivant en résultera :

css.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 :

css.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 :

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