Atkāpes flīžu izkārtojumā ar automātisku bloku platumu CSS

Pieņemsim, ka mums ir flīžu izkārtojums ar četriem blokiem pēc kārtas:

.child {
	width: 25%;
}

Pievienosim mūsu blokiem atkāpes procentos horizontāli un vertikāli:

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

Pagaidām tas, ko mēs izveidojām, nedarbosies korekti, jo kopējais bloku platums un atkāpes pārsniedz 100%. Lai darbotos korekti, mums ir no katra bloka jāatņem noteikts daudzums, lai būtu vietas mūsu atkāpēm. Aprēķināsim šos daudzumus.

Mūsu gadījumā sanāk, ka bloku ir četri, bet starp tiem trīs atstarpes - pa pusotru procentu. Lai aprēķinātu atņemamo daudzumu, ir nepieciešams kopējo atkāpju summu dalīt ar bloku skaitu:

1.5% * 3 / 4 = 1.125

Tad katra bloka platums būs vienāds ar:

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

Rezultātā iegūstam šādu kodu:

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

Varat neaprēķināt šo atkāpi paši, bet nodot aprēķina darbu funkcijai calc:

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

Arī bloka platumu ļaujiet aprēķināt funkcijai 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;
}

Iestatiet blokiem platumu procentos tā, lai flīžu izkārtojumā būtu trīs bloki pēc kārtas, bet starp tiem attālums 3%.

Iestatiet blokiem platumu procentos tā, lai flīžu izkārtojumā būtu seši bloki pēc kārtas, bet starp niem attālums 0.5%.

Iestatiet blokiem platumu procentos tā, lai flīžu izkārtojumā būtu četri bloki pēc kārtas, bet starp blokiem attālums 30px.

Iestatiet blokiem platumu procentos tā, lai flīžu izkārtojumā būtu pieci bloki pēc kārtas, bet starp blokiem attālums 50px.