Zamiki v ploščicah s samodejno širino blokov v CSS

Recimo, da imamo ploščico s štirimi bloki v vrsti:

css.child {
  width: 25%;
}

Dodajmo našim blokom odstotke zamikov vodoravno in navpično:

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

Zaenkrat bo to, kar smo naredili, delovalo nepravilno, ker je skupna širina blokov in zamikov večja od 100%. Za pravilno delovanje moramo od vsakega bloka odvzeti določen del, da bo prostor za naše zamike. Izračunajmo te dele.

V našem primeru se izkaže, da so bloki štirje, med njimi pa so trije zamiki - po en in pol odstotka. Za izračun odvzetega dela je treba skupni zamik deliti s številom blokov:

Potem bo širina vsakega bloka enaka:

Rezultat je naslednja koda:

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

Teh zamikov ni treba računati sami, ampak lahko nalogo izračuna prepustimo funkciji 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;
}

Naj tudi širino bloka izračuna funkcija 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;
}