Spațiile în plăci cu lățimea automată a blocurilor în CSS

Să presupunem că avem o placă cu patru blocuri pe rând:

css.child {
  width: 25%;
}

Să adăugăm blocurilor noastre spații în procente pe orizontală și pe verticală:

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

Ceea ce am făcut până acum va funcționa incorect, deorece lățimea totală a blocurilor și a spațiilor este mai mare de 100%. Pentru a funcționa corect trebuie să tăiem din fiecare bloc o anumită porțiune, pentru a face loc spațiilor noastre. Să calculăm aceste porțiuni.

În cazul nostru, avem patru blocuri, iar între ele trei spații - de câte unu și jumătate la sută. Pentru a calcula porțiunea de tăiat, trebuie împărțit spațiul total la numărul de blocuri:

Atunci lățimea fiecărui bloc va fi:

Rezultă următorul cod:

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

Putem să nu calculăm acest spațiu noi înșine, ci să dăm munca de calcul funcției 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;
}

Lățimea blocului să o calculeze și ea funcția 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;
}