Inspringen in tegelwerk met automatische blokbreedte in CSS

Stel we hebben een tegelwerk met vier blokken op een rij:

.child {
	width: 25%;
}

Laten we onze blokken procentuele marges toevoegen zowel horizontaal als verticaal:

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

Wat we tot nu toe hebben gedaan, zal niet correct werken, omdat de totale breedte van de blokken en de marges meer is dan 100%. Voor een correcte werking moeten we van elk blok een stukje afhalen, zodat er ruimte is voor onze marges. Laten we deze stukjes berekenen.

In ons geval zijn er vier blokken, en daartussen drie marges - van anderhalf procent elk. Om het af te halen stukje te berekenen, moet je de totale marge delen door het aantal blokken:

1.5% * 3 / 4 = 1.125

Dan is de breedte van elk blok gelijk aan:

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

Dit resulteert in de volgende code:

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

Je kunt de berekening van deze marge niet zelf doen, maar het werk de berekening overlaten aan de calc functie:

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

Laat de calc functie ook de blokbreedte berekenen:

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

Geef de blokken een breedte in procenten, zodat er drie blokken op een rij komen in het tegelwerk, met tussenruimte van 3%.

Geef de blokken een breedte in procenten, zodat er zes blokken op een rij komen in het tegelwerk, met tussenruimte van 0.5%.

Geef de blokken een breedte in procenten, zodat er vier blokken op een rij komen in het tegelwerk, met tussenruimte van 30px.

Geef de blokken een breedte in procenten, zodat er vijf blokken op een rij komen in het tegelwerk, met tussenruimte van 50px.