Отстъпи в плочки с авто-ширина на блоковете в 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;
}