Indrag i CSS-kakel med automatisk blockbredd

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

css.child {
  width: 25%;
}

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

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

Då blir bredden på varje block:

Detta resulterar i följande kod:

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

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

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;
}