CSS'те блоктордун автотууралыгы менен плиткадагы тартылуулар

Алдыда бизде катарда төрт блоктуу плитка бар деп коёлу:

.child {
	width: 25%;
}

Келгиле, биздин блокторго горизонталдык жана вертикалдык пайыздар менен тартылууларды кошолу:

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

Биз жасаган нерсе туура эмес иштейт, анткени блоктордун жана тартылуулардын жалпы тууралыгы 100% чоң. Туура иштөө үчүн биз ар бир блоктон белгилүү бир бөлүктү кесип алышыбыз керек, биздин тартылууларга орун болушу үчүн. Келгиле, бул бөлүктөрдү эсептейли.

Биздин учурда, төрт блок бар экени чыкты, алардын ортосунда үч тартылуу бар - ар бири бир жарым пайыз. Кесилип алынуучу бөлүктү эсептөө үчүн, талап жалпы тартылууну бөлүнөт блоктордун санына:

1.5% * 3 / 4 = 1.125

Ошондо ар бир блоктун тууралыгы барабар болот:

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

Төмөнкү код чыгат:

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

Бул тартылууну өзүбүз эсептебестен, эсептөө ишин calc функциясына жүктөсө болот:

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

Блоктун тууралыгын дагы 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;
}

Блокторго пайыздар менен тууралыкты белгилегиле, ошондо плиткада катарда үч блок болсун, алардын ортосунда 3% аралык болсун.

Блокторго пайыздар менен тууралыкты белгилегиле, ошондо плиткада катарда алты блок болсун, алардын ортосунда 0.5% аралык болсун.

Блокторго пайыздар менен тууралыкты белгилегиле, ошондо плиткада катарда төрт блок болсун, алардын ортосунда 30px аралык болсун.

Блокторго пайыздар менен тууралыкты белгилегиле, ошондо плиткада катарда беш блок болсун, алардын ортосунда 50px аралык болсун.