Водступы ў плітачнай раскладцы з аўташырынёй блокаў на 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.