Wcięcia w kafelkach z automatyczną szerokością bloków w CSS

Załóżmy, że mamy kafelki po cztery bloki w rzędzie:

.child {
	width: 25%;
}

Dodajmy naszym blokom wcięcia w procentach w poziomie i w pionie:

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

Na razie to, co zrobiliśmy, będzie działać nieprawidłowo, ponieważ całkowita szerokość bloków i wcięć jest większa niż 100%. Aby działało poprawnie, musimy od każdego bloku odjąć pewien kawałek, aby zrobić miejsce na nasze wcięcia. Obliczmy te kawałki.

W naszym przypadku okazuje się, że bloków jest cztery, a między nimi trzy wcięcia - po półtora procent. Aby obliczyć odejmowany kawałek, należy całkowite wcięcie podzielić przez liczbę bloków:

1.5% * 3 / 4 = 1.125

Wtedy szerokość każdego bloku będzie równa:

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

Otrzymamy następujący kod:

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

Można nie obliczać tego wcięcia samodzielnie, a zlecić pracę z obliczeniami funkcji calc:

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

Szerokość bloku niech również oblicza funkcja 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;
}

Ustaw blokom szerokość w procentach tak, aby w kafelkach znalazły się trzy bloki w rzędzie, a między nimi odstęp wynosił 3%.

Ustaw blokom szerokość w procentach tak, aby w kafelkach znalazło się sześć bloków w rzędzie, a między nimi odstęp wynosił 0.5%.

Ustaw blokom szerokość w procentach tak, aby w kafelkach znalazły się cztery bloki w rzędzie, a między blokami był odstęp wynoszący 30px.

Ustaw blokom szerokość w procentach tak, aby w kafelkach znalazło się pięć bloków w rzędzie, a między blokami był odstęp wynoszący 50px.