Innrykk i flisearrangement med auto-bredde blokker i CSS

La oss si at vi har et flisearrangement med fire blokker på rad:

css.child {
  width: 25%;
}

La oss legge til innrykk i prosent for blokkene våre horisontalt og vertikalt:

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

Det vi har gjort så langt vil ikke fungere korrekt, siden den totale bredden på blokkene og innrykkene er mer enn 100%. For at det skal fungere korrekt må vi skjære av en liten del fra hver blokk for å gjøre plass til innrykkene våre. La oss beregne disse delene.

I vårt tilfelle har vi fire blokker, og mellom dem tre innrykk – på halvannen prosent hver. For å beregne delen som må skjæres av, må du dele det totale innrykket på antall blokker:

Da vil bredden på hver blokk være:

Resultatet blir følgende kode:

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

Du kan la være å beregne dette innrykket selv, og overlate beregningsarbeidet til calc-funksjonen:

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

La også calc-funksjonen beregne blokkbredden:

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