Behúzások csempe elrendezésben, automatikus szélességű blokkokkal CSS-ben

Tegyük fel, hogy van egy csempe elrendezésünk, soronként négy blokkal:

.child {
	width: 25%;
}

Adjunk a blokkjainknak százalékos behúzásokat vízszintesen és függőlegesen:

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

Amíg azt tettük, amit tettünk, az helytelenül fog működni, mivel a blokkok és a behúzások összes szélessége több, mint 100%. A helyes működés érdekében minden blokkból le kell vennünk egy bizonyos részt, hogy hely legyen a behúzásainknak. Számoljuk ki ezeket a részeket.

Esetünkben az jön ki, hogy négy blokk van, köztük pedig három behúzás - egy-egy és fél százalék. Ahhoz, hogy kiszámoljuk az elvenni kívánt részt, a behúzások összegét el kell osztanunk a blokkok számával:

1.5% * 3 / 4 = 1.125

Ekkor minden blokk szélessége egyenlő lesz:

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

A következő kódot kapjuk:

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

Nem kell ezt a behúzást saját magunknak kiszámolni, hanom átadhatjuk a számítási munkát a calc függvénynek:

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

A blokk szélességét is hagyja, hogy a calc függvény számolja ki:

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

Állítsa be a blokkok szélességét százalékban úgy, hogy a csempében soronként három blokk legyen, köztük 3% távolsággal.

Állítsa be a blokkok szélességét százalékban úgy, hogy a csempében soronként hat blokk legyen, köztük 0.5% távolsággal.

Állítsa be a blokkok szélességét százalékban úgy, hogy a csempében soronként négy blokk legyen, a blokkok között 30px távolsággal.

Állítsa be a blokkok szélességét százalékban úgy, hogy a csempében soronként öt blokk legyen, a blokkok között 50px távolsággal.