Taanded plokkidest koosnevas plokikujulises paigutuses CSS-is

Oletame, et meil on plokikujuline paigutus nelja plokiga reas:

css.child {
  width: 25%;
}

Lisame oma plokkidele protsentuaalsed taanded horisontaalselt ja vertikaalselt:

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

Praegu see, mida me tegime, ei tööta korrektselt, kuna plokkide ja taandete kogulaius on suurem kui 100%. Korrektoimimiseks peame igalt plokilt ära lõikama teatava osa, et jätkus ruumi meie taandete jaoks. Arvutame need osad välja.

Meie juhul selgub, et plokke on neli, nende vahel on kolm taandet - pooleteist protsenti. Et arvutada äralõigatav osa, tuleb taandete kogusumma jagada plokkide arvuga:

Siis on iga ploki laius võrdne:

Saame järgmise koodi:

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

Saame selle taande arvutamise üle kanda funktsioonile 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;
}

Ploki laiuse võib ka lasta arvutada funktsioonil 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;
}