Odsadenia v dlaždiciach s automatickou šírkou blokov v CSS

Predpokladajme, že máme dlaždice so štyrmi blokmi v rade:

.child {
	width: 25%;
}

Pridajme našim blokom percentuálne odsadenia horizontálne a vertikálne:

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

To, čo sme doteraz urobili, bude fungovať nesprávne, pretože celková šírka blokov a odsadení je väčšia ako 100%. Pre správnu funkčnosť musíme od každého bloku odrátať určitú časť, aby sme uvoľnili miesto pre naše odsadenia. Vypočítajme si tieto časti.

V našom prípade máme štyri bloky a medzi nimi tri medzery - po jeden a pol percenta. Na výpočet časti, ktorú musíme odrátať, je potrebné celkové odsadenie vydeliť počtom blokov:

1.5% * 3 / 4 = 1.125

Potom bude šírka každého bloku rovná:

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

Výsledný kód bude vyzerať nasledovne:

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

Namiesto manuálneho výpočtu môžeme túto prácu prenechať funkcii calc:

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

Šírku bloku môže taktiež počítať funkcia 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 blokom šírku v percentách tak, aby v dlaždici boli tri bloky v rade a medzi nimi bola medzera 3%.

Nastavte blokom šírku v percentách tak, aby v dlaždici bolo šesť blokov v rade a medzi nimi bola medzera 0.5%.

Nastavte blokom šírku v percentách tak, aby v dlaždici boli štyri bloky v rade a medzi blokmi bola medzera 30px.

Nastavte blokom šírku v percentách tak, aby v dlaždici bolo päť blokov v rade a medzi blokmi bola medzera 50px.