Отстъпи в плочки с авто-ширина на блоковете в CSS

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

.child {
	width: 25%;
}

Нека добавим на нашите блокове отстъпи в проценти хоризонтално и вертикално:

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

Засега това, което направихме, ще работи неправилно, тъй като общата ширина на блоковете и отстъпите е повече от 100%. За да работи коректно трябва от всеки блок да отрежем определена част, за да има място за нашите отстъпи. Нека изчислим тези части.

В нашия случай се получава, че блоковете са четири, а между тях има три отстъпа - по един и половина процента. За да изчислим частта, която трябва да се отнеме, трябва общият отстъп да се раздели на броя блокове:

1.5% * 3 / 4 = 1.125

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

25% - 1.5% * 3 / 4 = 23.875%

Получава се следният код:

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

Можем да не изчисляваме този отстъп сами, а да оставим работата по изчислението на функцията calc:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Ширината на блока също нека я изчислява функцията calc:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Задайте на блоковете ширина в проценти така, че в плочката да станат три блока в ред, а между тях разстояние от 3%.

Задайте на блоковете ширина в проценти така, че в плочката да станат шест блока в ред, а между тях разстояние от 0.5%.

Задайте на блоковете ширина в проценти така, че в плочката да станат четири блока в ред, а между блоковете да има разстояние от 30px.

Задайте на блоковете ширина в проценти така, че в плочката да станат пет блока в ред, а между блоковете да има разстояние от 50px.