Вдлабнатини во плочки со автоматска ширина на блокови во 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.