Uvlačenja u pločicama sa automatskom širinom blokova u CSS-u

Neka imamo pločicu sa po četiri bloka u redu:

.child {
	width: 25%;
}

Dodajmo našim blokovima procentualna uvlačenja horizontalno i vertikalno:

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

Za sada, ono što smo uradili neće raditi ispravno, pošto je ukupna širina blokova i uvlačenja veća od 100%. Za ispravan rad potrebno je od svakog bloka "odgristi" određeni deo kako bi bilo mesta za naša uvlačenja. Izračunajmo te delove.

U našem slučaju imamo četiri bloka, a između njih tri razmaka - od po jedan i po procenat. Da bismo izračunali deo koji treba oduzeti, potrebno je ukupan razmak podeliti sa brojem blokova:

1.5% * 3 / 4 = 1.125

Tada će širina svakog bloka biti:

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

Rezultat je sledeći kod:

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

Ne moramo sami računati ovo uvlačenje, već možemo prepustiti posao izračunavanja funkciji calc:

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

Neka i širinu bloka izračunava funkcija 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;
}

Postavite blokovima širinu u procentima tako da u pločici bude tri bloka u redu, a između njih razmak od 3%.

Postavite blokovima širinu u procentima tako da u pločici bude šest blokova u redu, a između njih razmak od 0.5%.

Postavite blokovima širinu u procentima tako da u pločici bude četiri bloka u redu, a između blokova bude razmak od 30px.

Postavite blokovima širinu u procentima tako da u pločici bude pet blokova u redu, a između blokova bude razmak od 50px.