Tarpai plytelėje su automatinio pločio blokais CSS

Tarkime, kad turime plytelę su keturiais blokais iš eilės:

.child {
	width: 25%;
}

Suteikime mūsų blokams procentinius tarpus horizontaliai ir vertikaliai:

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

Kol kas tai, ką padarėme, veiks neteisingai, nes bendras blokų plotis ir tarpų plotis viršija 100%. Kad veiktų teisingai, turime nuimti tam tikrą dalį nuo kiekvieno bloko, kad būtų vietos mūsų tarpams. Apskaičiuokime šias dalis.

Mūsų atveju pasirodo, kad blokų yra keturi, o tarp jų yra trys tarpai - po pusantro procento. Norint apskaičiuoti atimamą dalį, reikia bendrą tarpų plotį padalinti iš blokų skaičiaus:

1.5% * 3 / 4 = 1.125

Tada kiekvieno bloko plotis bus lygus:

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

Gausime tokį kodą:

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

Galima neskaičiuoti šio tarpo patiems, o perduoti skaičiavimo darbą calc funkcijai:

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

Bloko plotį taip pat tegu apskaičiuoja 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;
}

Nustatykite blokų plotį procentais taip, kad plytelėje būtų trys blokai iš eilės, o tarp jų būtų 3% atstumas.

Nustatykite blokų plotį procentais taip, kad plytelėje būtų šeši blokai iš eilės, o tarp jų būtų 0.5% atstumas.

Nustatykite blokų plotį procentais taip, kad plytelėje būtų keturi blokai iš eilės, o tarp blokų būtų 30px atstumas.

Nustatykite blokų plotį procentais taip, kad plytelėje būtų penki blokai iš eilės, o tarp blokų būtų 50px atstumas.