Einrückungen in Kacheln mit automatischer Blockbreite in CSS

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

.child {
	width: 25%;
}

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

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

1.5% * 3 / 4 = 1.125

Dann beträgt die Breite jedes Blocks:

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

Daraus ergibt sich der folgende Code:

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

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

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

Weisen Sie den Blöcken eine Breite in Prozent zu, sodass in der Kachelung drei Blöcke in einer Reihe sind, mit einem Abstand von 3% dazwischen.

Weisen Sie den Blöcken eine Breite in Prozent zu, sodass in der Kachelung sechs Blöcke in einer Reihe sind, mit einem Abstand von 0.5% dazwischen.

Weisen Sie den Blöcken eine Breite in Prozent zu, sodass in der Kachelung vier Blöcke in einer Reihe sind, mit einem Abstand von 30px zwischen den Blöcken.

Weisen Sie den Blöcken eine Breite in Prozent zu, sodass in der Kachelung fünf Blöcke in einer Reihe sind, mit einem Abstand von 50px zwischen den Blöcken.