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 бўлсин.