Увлачења у плочицама са аутоширином блокова у CSS

Претпоставимо да имамо плочицу са по четири блока у реду:

.child {
	width: 25%;
}

Додајмо нашим блоковима увлачења у процентима хоризонтално и вертикално:

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

Засад оно што смо урадили неће радити коректно, јер је укупна ширина блокова и увлачења већа од 100%. За коректно функционисање морамо од сваког блока одузети одређени део како би направили простор за наша увлачења. Израчунајмо те делове.

У нашем случају имамо четири блока, а између њих три увлачења - од по један и по проценат. Да бисмо израчунали део који одузимамо, потребно је да укупно увлачење поделимо са бројем блокова:

1.5% * 3 / 4 = 1.125

Тада ће ширина сваког блока бити једнака:

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

Добија се следећи код:

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

Можемо и сами да не рачунамо ово увлачење, већ да препустимо рачунској функцији calc:

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

Ширину блока такође нека израчунава функција 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;
}

Поставите блоковима ширину у процентима тако да у плочици буде три блока у реду, а између њих растојање од 3%.

Поставите блоковима ширину у процентима тако да у плочици буде шест блокова у реду, а између њих растојање од 0.5%.

Поставите блоковима ширину у процентима тако да у плочици буде четири блока у реду, а између блокова буде растојање од 30px.

Поставите блоковима ширину у процентима тако да у плочици буде пет блокова у реду, а између блокова буде растојање од 50px.