Spațiile în plăci cu lățimea automată a blocurilor în CSS

Să presupunem că avem o placă cu patru blocuri pe rând:

.child {
	width: 25%;
}

Să adăugăm blocurilor noastre spații în procente pe orizontală și pe verticală:

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

Ceea ce am făcut până acum va funcționa incorect, deorece lățimea totală a blocurilor și a spațiilor este mai mare de 100%. Pentru a funcționa corect trebuie să tăiem din fiecare bloc o anumită porțiune, pentru a face loc spațiilor noastre. Să calculăm aceste porțiuni.

În cazul nostru, avem patru blocuri, iar între ele trei spații - de câte unu și jumătate la sută. Pentru a calcula porțiunea de tăiat, trebuie împărțit spațiul total la numărul de blocuri:

1.5% * 3 / 4 = 1.125

Atunci lățimea fiecărui bloc va fi:

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

Rezultă următorul cod:

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

Putem să nu calculăm acest spațiu noi înșine, ci să dăm munca de calcul funcției calc:

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

Lățimea blocului să o calculeze și ea funcția 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;
}

Setați blocurilor lățimea în procente astfel încât în placă să fie trei blocuri pe rând, iar între ele spațiu de 3%.

Setați blocurilor lățimea în procente astfel încât în placă să fie șase blocuri pe rând, iar între ele spațiu de 0.5%.

Setați blocurilor lățimea în procente astfel încât în placă să fie patru blocuri pe rând, iar între blocuri să fie spațiu de 30px.

Setați blocurilor lățimea în procente astfel încât în placă să fie cinci blocuri pe rând, iar între blocuri să fie spațiu de 50px.