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 болсын.