Inspringe in teëlblokkies met outowydte blokke in CSS

Kom ons sê ons het 'n teëlrooster met vier blokke in 'n ry:

.child {
	width: 25%;
}

Laat ons vir ons blokke inspringe in persentasies horisontaal en vertikaal byvoeg:

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

Wat ons tot dusver gedoen het, sal onkorrek werk, aangesien die totale wydte van die blokke en die inspringing meer as 100% is. Vir korrekte werking moet ons 'n stukkie van elke blok afsny om plek vir ons inspringing te maak. Laat ons hierdie stukkies bereken.

In ons geval is daar vier blokke, en tussen hulle is daar drie spasies - elk van anderhalf persent. Om die af te sny stukkie te bereken, moet die totale inspringing gedeel word deur die aantal blokke:

1.5% * 3 / 4 = 1.125

Dan sal die wydte van elke blok gelyk wees aan:

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

Dit lei tot die volgende kode:

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

Ons hoef nie hierdie inspringing self te bereken nie, maar kan die werk van berekening oplaai na die calc funksie:

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

Laat ook die blok se wydte bereken word deur die calc funksie:

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

Stel die blokke se wydte in persentasies sodanig in dat daar drie blokke per ry in die teëlrooster is, met 'n spasie van 3% tussen hulle.

Stel die blokke se wydte in persentasies sodanig in dat daar ses blokke per ry in die teëlrooster is, met 'n spasie van 0.5% tussen hulle.

Stel die blokke se wydte in persentasies sodanig in dat daar vier blokke per ry in die teëlrooster is, met 'n spasie van 30px tussen die blokke.

Stel die blokke se wydte in persentasies sodanig in dat daar vyf blokke per ry in die teëlrooster is, met 'n spasie van 50px tussen die blokke.