Фосилаҳо дар плитка бо блокҳои васеъкунии худкор дар 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 бошад.