Innrykk i flisearrangement med auto-bredde blokker i CSS

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

.child {
	width: 25%;
}

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

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

1.5% * 3 / 4 = 1.125

Da vil bredden på hver blokk være:

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

Resultatet blir følgende kode:

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

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

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

Angi blokkene en bredde i prosent slik at det blir tre blokker på rad i flisearrangementet, med avstand på 3% mellom dem.

Angi blokkene en bredde i prosent slik at det blir seks blokker på rad i flisearrangementet, med avstand på 0.5% mellom dem.

Angi blokkene en bredde i prosent slik at det blir fire blokker på rad i flisearrangementet, med avstand på 30px mellom blokkene.

Angi blokkene en bredde i prosent slik at det blir fem blokker på rad i flisearrangementet, med avstand på 50px mellom blokkene.