Marginer i flisebelægning med automatisk blokbredde i CSS

Lad os sige, at vi har en flisebelægning med fire blokke i række:

.child {
	width: 25%;
}

Lad os tilføje marginer i procent til vores blokke horisontalt og vertikalt:

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

Hidtil vil det, vi har lavet, ikke fungere korrekt, da den samlede bredde af blokkene og marginerne er mere end 100%. For at det skal fungere korrekt skal vi fjerne et stykke fra hver blok, så der er plads til vores marginer. Lad os beregne disse stykker.

I vores tilfælde viser det sig, at der er fire blokke, og mellem dem er der tre marginer - på halvanden procent hver. For at beregne det stykke, der skal fjernes, skal den samlede margin divideres med antallet af blokke:

1.5% * 3 / 4 = 1.125

Så vil bredden af hver blok være:

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

Resultatet bliver følgende kode:

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

Man kan lade være med at beregne denne margin selv og i stedet lade arbejdet med beregningen blive udført af funktionen calc:

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

Lad også bredden af blokken blive beregnet af funktionen calc:

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

Indstil blokkenes bredde i procent, så der kommer tre blokke i række i flisebelægningen, med en afstand imellem dem på 3%.

Indstil blokkenes bredde i procent, så der kommer seks blokke i række i flisebelægningen, med en afstand imellem dem på 0.5%.

Indstil blokkenes bredde i procent, så der kommer fire blokke i række i flisebelægningen, med en afstand imellem blokkene på 30px.

Indstil blokkenes bredde i procent, så der kommer fem blokke i række i flisebelægningen, med en afstand imellem blokkene på 50px.