Taanded plokkidest koosnevas plokikujulises paigutuses CSS-is

Oletame, et meil on plokikujuline paigutus nelja plokiga reas:

.child {
	width: 25%;
}

Lisame oma plokkidele protsentuaalsed taanded horisontaalselt ja vertikaalselt:

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

Praegu see, mida me tegime, ei tööta korrektselt, kuna plokkide ja taandete kogulaius on suurem kui 100%. Korrektoimimiseks peame igalt plokilt ära lõikama teatava osa, et jätkus ruumi meie taandete jaoks. Arvutame need osad välja.

Meie juhul selgub, et plokke on neli, nende vahel on kolm taandet - pooleteist protsenti. Et arvutada äralõigatav osa, tuleb taandete kogusumma jagada plokkide arvuga:

1.5% * 3 / 4 = 1.125

Siis on iga ploki laius võrdne:

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

Saame järgmise koodi:

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

Saame selle taande arvutamise üle kanda funktsioonile calc:

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

Ploki laiuse võib ka lasta arvutada funktsioonil 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;
}

Määra plokkidele laius protsentides nii, et plokikujulises paigutuses oleks kolm plokki reas ja nende vahe oleks 3%.

Määra plokkidele laius protsentides nii, et plokikujulises paigutuses oleks kuus plokki reas ja nende vahe oleks 0.5%.

Määra plokkidele laius protsentides nii, et plokikujulises paigutuses oleks neli plokki reas ja plokkide vahe oleks 30px.

Määra plokkidele laius protsentides nii, et plokikujulises paigutuses oleks viis plokki reas ja plokkide vahe oleks 50px.