Dhëndjet në pllaka me gjerësi automatike të blloqeve në CSS

Le të supozojmë se kemi një pllakë me katër blloqe në një rresht:

css.child {
  width: 25%;
}

Le t'u shtojmë blloqeve tona dhëndje në përqindje horizontalisht dhe vertikalisht:

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

Për momentin, ajo që kemi bërë nuk do të funksionojë si duhet, pasi gjerësia totale e blloqeve dhe e dhëndjeve është më e madhe se 100%. Që të funksionojë si duhet ne duhet të heqim nga secili bllok një pjesë të caktuar, që të krijohet hapësirë për dhëndjet tona. Le të llogarisim këto pjesë.

Në rastin tonë, del se ka katër blloqe, dhe midis tyre tre hapësira - nga një e përçantë për qind. Për të llogaritur pjesën që do të heqim, duhet të pjesëtojmë dhëndjen totale me numrin e blloqeve:

Atëherë gjerësia e secilit bllok do të jetë e barabartë me:

Kodi që rezulton do të jetë si më poshtë:

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

Mund të mos e llogarisim këtë dhëndje vetë, por t'ia lëmë punën e llogaritjes funksionit 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;
}

Gjerësinë e bllokut le ta llogarisë gjithashtu funksioni 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;
}