Вдлабнатини во плочки со автоматска ширина на блокови во CSS

Да претпоставиме дека имаме плочка со четири блокови во ред:

css.child {
  width: 25%;
}

Ајде да додадеме на нашите блокови вдлабнатини во проценти хоризонтално и вертикално:

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

Засега, она што го направивме, нема да работи коректно, бидејќи вкупната ширина на блоковите и вдлабнатините е поголема од 100%. За коректна работа мораме од секој блок да одземеме одреден дел, за да има место за нашите вдлабнатини. Ајде да ги пресметаме овие делови.

Во нашиот случај, излегува дека има четири блока, а помеѓу нив три вдлабнатини - од по еден и пол процент. За да се пресмета делот што се одзема, потребно е вкупната вдлабнатина да се подели со бројот на блокови:

Тогаш ширината на секој блок ќе биде еднаква на:

Ќе се добие следниот код:

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

Можно е да не ги пресметуваме овие вдлабнатини самите, туку да ја пренесеме работата на пресметување на функцијата 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;
}

Ширината на блокот исто така нека ја пресметува функцијата 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;
}