Отступы в плиточке с автошириной блоков в CSS

Пусть у нас есть плиточка по четыре блока в ряд:

css.child {
  width: 25%;
}

Давайте добавим нашим блокам отступы в процентах по горизонтали и по вертикали:

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

Пока то, что мы сделали, будет работать некорректно, так как суммарная ширина блоков и отступов больше 100%. Для корректной работы мы должны от каждого блока откусить некоторый кусочек, чтобы было место под наши отступы. Давайте вычислим эти кусочки.

В нашем случае получается, что блоков четыре, а между ними три отступа - по полтора процента. Чтобы вычислить отнимаемый кусочек, нужно суммарный отступ поделить на количество блоков:

Toгда ширина каждого блока будет равна:

Получится следующий код:

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;
}