Odsadenia v dlaždiciach s automatickou šírkou blokov v CSS

Predpokladajme, že máme dlaždice so štyrmi blokmi v rade:

css.child {
  width: 25%;
}

Pridajme našim blokom percentuálne odsadenia horizontálne a vertikálne:

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

To, čo sme doteraz urobili, bude fungovať nesprávne, pretože celková šírka blokov a odsadení je väčšia ako 100%. Pre správnu funkčnosť musíme od každého bloku odrátať určitú časť, aby sme uvoľnili miesto pre naše odsadenia. Vypočítajme si tieto časti.

V našom prípade máme štyri bloky a medzi nimi tri medzery - po jeden a pol percenta. Na výpočet časti, ktorú musíme odrátať, je potrebné celkové odsadenie vydeliť počtom blokov:

Potom bude šírka každého bloku rovná:

Výsledný kód bude vyzerať nasledovne:

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

Namiesto manuálneho výpočtu môžeme túto prácu prenechať funkcii 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;
}

Šírku bloku môže taktiež počítať funkcia 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;
}