Zamiki v ploščicah s samodejno širino blokov v CSS

Recimo, da imamo ploščico s štirimi bloki v vrsti:

.child {
	width: 25%;
}

Dodajmo našim blokom odstotke zamikov vodoravno in navpično:

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

Zaenkrat bo to, kar smo naredili, delovalo nepravilno, ker je skupna širina blokov in zamikov večja od 100%. Za pravilno delovanje moramo od vsakega bloka odvzeti določen del, da bo prostor za naše zamike. Izračunajmo te dele.

V našem primeru se izkaže, da so bloki štirje, med njimi pa so trije zamiki - po en in pol odstotka. Za izračun odvzetega dela je treba skupni zamik deliti s številom blokov:

1.5% * 3 / 4 = 1.125

Potem bo širina vsakega bloka enaka:

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

Rezultat je naslednja koda:

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

Teh zamikov ni treba računati sami, ampak lahko nalogo izračuna prepustimo 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;
}

Naj tudi širino bloka izračuna 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;
}

Nastavite blokom širino v odstotkih tako, da v ploščici postanejo trije bloki v vrsti, med njimi pa razdalja 3%.

Nastavite blokom širino v odstotkih tako, da v ploščici postane šest blokov v vrsti, med njimi pa razdalja 0.5%.

Nastavite blokom širino v odstotkih tako, da v ploščici postanejo štirje bloki v vrsti, med bloki pa naj bo razdalja 30px.

Nastavite blokom širino v odstotkih tako, da v ploščici postane pet blokov v vrsti, med bloki pa naj bo razdalja 50px.