Marginer i flisebelægning med automatisk blokbredde i CSS

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

css.child {
  width: 25%;
}

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

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

Så vil bredden af hver blok være:

Resultatet bliver følgende kode:

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

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

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