Отступы в плиточке с автошириной блоков на 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.