Odsazení v dlaždici s automatickou šířkou bloků v CSS

Předpokládejme, že máme dlaždici se čtyřmi bloky v řadě:

.child {
	width: 25%;
}

Přidejme našim blokům procentuální odsazení vodorovně a svisle:

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

To, co jsme zatím udělali, bude fungovat nesprávně, protože celková šířka bloků a odsazení přesahuje 100%. Pro správnou funkci musíme od každého bloku ubrat určitou část, aby byl prostor pro naše odsazení. Pojďme vypočítat tyto části.

V našem případě vychází, že bloků jsou čtyři, a mezi nimi jsou tři mezery - každá o šířce jeden a půl procenta. Pro výpočet odečítané části je potřeba celkové odsazení vydělit počtem bloků:

1.5% * 3 / 4 = 1.125

Potom bude šířka každého bloku rovna:

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

Výsledný kód bude následující:

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

Není nutné tento výpočet provádět ručně, práci lze přenést na funkci calc:

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

Výpočet šířky bloku také můžeme svěřit funkci 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;
}

Nastavte blokům šířku v procentech tak, aby v dlaždici byly tři bloky v řadě a mezi nimi byla mezera 3%.

Nastavte blokům šířku v procentech tak, aby v dlaždici bylo šest bloků v řadě a mezi nimi byla mezera 0.5%.

Nastavte blokům šířku v procentech tak, aby v dlaždici byly čtyři bloky v řadě a mezi bloky byla mezera 30px.

Nastavte blokům šířku v procentech tak, aby v dlaždici bylo pět bloků v řadě a mezi bloky byla mezera 50px.