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

Tuchukulie tuna uashi wa vizuizi vinne kwa kila mstari:

css.child {
  width: 25%;
}

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

css.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:

Kisha upana wa kila kizuizi utakuwa:

Itatokea msimbo ufuatao:

css.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:

css.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:

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