Vipimo vya ndani kwenye uashi wa vizuizi vilivyo na upana wa kiotomatiki katika CSS

Tuchukulie tuna uashi wa vizuizi vinne kwa kila mstari:

.child {
	width: 25%;
}

Wacha tuongeze vipimo vya ndani kwa vizuizi vyetu kwa asilimia usawa na wima:

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

Kwa sasa, tulichofanya kitakwenda shida, kwa sababu jumla ya upana wa vizuizi na vipimo vya ndani inazidi 100%. Ili iweze kufanya kazi vizuri tunahitaji kukata kipande fulani kutoka kwa kila kizuizi, ili kuwapa nafasi vipimo vyetu vya ndani. Wacha tuhesabu vipande hivi.

Katika kesi hii inatokea kuna vizuizi vinne, na kati yacho vipimo vitatu vya ndani - ya asilimia moja na nusu. Ili kuhesabu kipande cha kupunguza, unahitaji gawanya jumla ya vipimo vya ndani kwa idadi ya vizuizi:

1.5% * 3 / 4 = 1.125

Kisha upana wa kila kizuizi utakuwa:

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

Itatokea msimbo ufuatao:

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

Huna haja ya kuhesabu mpaka huu wewe mwenyewe, unaweza kuiacha kazi ya kuhesabu kwa kitendakazi calc:

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

Upana wa kizuizi pia wacha uhesabiwe na kitendakazi 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;
}

Weka vizuizi upana kwa asilimia, ili kwenye uashi kuwe na vizuizi vitatu kwa kila mstari, na kati yacho umbali wa 3%.

Weka vizuizi upana kwa asilimia, ili kwenye uashi kuwe na vizuizi sita kwa kila mstari, na kati yacho umbali wa 0.5%.

Weka vizuizi upana kwa asilimia, ili kwenye uashi kuwe na vizuizi vinne kwa kila mstari, na kati ya vizuizi kuwe na umbali wa 30px.

Weka vizuizi upana kwa asilimia, ili kwenye uashi kuwe na vizuizi tano kwa kila mstari, na kati ya vizuizi kuwe na umbali wa 50px.