Водступы ў плітачнай раскладцы з аўташырынёй блокаў на 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;
}