Einrückungen in Kacheln mit automatischer Blockbreite in CSS

Nehmen wir an, wir haben eine Kachelung mit vier Blöcken in einer Reihe:

css.child {
  width: 25%;
}

Fügen wir unseren Blöcken prozentuale Abstände horizontal und vertikal hinzu:

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

Was wir bisher gemacht haben, wird vorerst nicht korrekt funktionieren, da die Gesamtbreite der Blöcke und Abstände mehr als 100% beträgt. Für ein korrektes Funktionieren müssen wir von jedem Block ein kleines Stück abschneiden, um Platz für unsere Abstände zu schaffen. Berechnen wir diese Stücke.

In unserem Fall ergibt sich, dass es vier Blöcke gibt, und dazwischen drei Abstände - jeweils anderthalb Prozent. Um das abzuziehende Stück zu berechnen, muss der Gesamtabstand durch die Anzahl der Blöcke geteilt werden:

Dann beträgt die Breite jedes Blocks:

Daraus ergibt sich der folgende Code:

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

Man muss diesen Abstand nicht selbst berechnen, sondern kann die Berechnungsarbeit der Funktion calc überlassen:

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

Lassen wir auch die Blockbreite von der Funktion calc berechnen:

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