Indrag i CSS-kakel med automatisk blockbredd

Låt oss säga att vi har en kakelstruktur med fyra block i rad:

.child {
	width: 25%;
}

Låt oss lägga till marginaler i procent för våra block horisontellt och vertikalt:

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

Vad vi har gjort hittills kommer att fungera felaktigt, eftersom den totala bredden på blocken och marginalerna är större än 100%. För att det ska fungera korrekt måste vi ta bort en del av varje block för att göra plats för våra marginaler. Låt oss beräkna dessa delar.

I vårt fall blir det så att det finns fyra block, och mellan dem finns tre mellanrum - på en och en halv procent vardera. För att beräkna delen som ska dras av, behöver du dividera den totala marginalen med antalet block:

1.5% * 3 / 4 = 1.125

Då blir bredden på varje block:

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

Detta resulterar i följande kod:

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

Du kan låta bli att beräkna detta avstånd själv, och istället överlåta beräkningen till funktionen calc:

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

Låt även blockets bredd beräknas av funktionen 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;
}

Ställ in blockens bredd i procent så att det blir tre block i rad i kakelstrukturen, med ett avstånd mellan dem på 3%.

Ställ in blockens bredd i procent så att det blir sex block i rad i kakelstrukturen, med ett avstånd mellan dem på 0.5%.

Ställ in blockens bredd i procent så att det blir fyra block i rad i kakelstrukturen, med ett avstånd mellan blocken på 30px.

Ställ in blockens bredd i procent så att det blir fem block i rad i kakelstrukturen, med ett avstånd mellan blocken på 50px.