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:

.child {
	width: 25%;
}

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

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

1.5% * 3 / 4 = 1.125

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

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

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

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

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

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

Caktoni blloqeve një gjerësi në përqindje në mënyrë që në pllakë të ketë tre blloqe në një rresht, dhe midis tyre të ketë një distancë prej 3%.

Caktoni blloqeve një gjerësi në përqindje në mënyrë që në pllakë të ketë gjashtë blloqe në një rresht, dhe midis tyre të ketë një distancë prej 0.5%.

Caktoni blloqeve një gjerësi në përqindje në mënyrë që në pllakë të ketë katër blloqe në një rresht, dhe midis blloqeve të ketë një distancë prej 30px.

Caktoni blloqeve një gjerësi në përqindje në mënyrë që në pllakë të ketë pesë blloqe në një rresht, dhe midis blloqeve të ketë një distancë prej 50px.