CSSda avtomatik kenglikdagi bloklar bilan plitkachalarda joy tashlash

Aytaylik, bizda qatorda to'rtta blokdan iborat plitkachamiz bor:

.child {
	width: 25%;
}

Keling, bloklarimizga gorizontal va vertikal foizlarda joy tashlaymiz:

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

Biz qilgan narsa hozircha noto'g'ri ishlaydi, chunki bloklar va ular orasidagi joylarning umumiy kengligi 100% dan katta. To'g'ri ishlashi uchun biz har bir blokdan ma'lum bir qismini olib tashlashimiz kerak, shunda bizning joylarimiz uchun joy bo'ladi. Keling, ushbu qismlarni hisoblaylik.

Bizning holatda, bloklar to'rtta, ular orasida uchta joy - har biri bir yarim foiz. Olinadigan qismni hisoblash uchun joylarning umumiy miqdorini bloklar soniga bo'lish kerak:

1.5% * 3 / 4 = 1.125

Undan so'ng har bir blokning kengligi quyidagicha bo'ladi:

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

Natijada quyidagi kod hosil bo'ladi:

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

Ushbu joyni o'zimiz hisoblamasdan, hisoblash ishini calc funktsiyasiga topshirish mumkin:

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

Blok kengligini ham calc funktsiyasi hisoblab bersin:

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

Bloklarga foizlarda kenglik bering, shunda plitkachada qatorda uchta blok bo'lsin, ular orasidagi masofa 3% bo'lsin.

Bloklarga foizlarda kenglik bering, shunda plitkachada qatorda oltita blok bo'lsin, ular orasidagi masofa 0.5% bo'lsin.

Bloklarga foizlarda kenglik bering, shunda plitkachada qatorda to'rtta blok bo'lsin, ular orasidagi masofa 30px bo'lsin.

Bloklarga foizlarda kenglik bering, shunda plitkachada qatorda beshta blok bo'lsin, ular orasidagi masofa 50px bo'lsin.