CSS-də avtogenişlikli bloklar olan plitə düzənində boşluqlar

Tutaq ki, bizim sırada dörd blok olan bir plitə düzənimiz var:

.child {
	width: 25%;
}

Gəlin bloklarımıza üfiqi və şaquli istiqamətdə faizlə boşluqlar əlavə edək:

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

Etdiyimiz iş hələ ki düzgün işləməyəcək, çünki blokların və boşluqların ümumi eni 100%-dən çoxdur. Düzgün işləməsi üçün biz hər blokdan boşluqlar üçün yer yaratmaq məqsədilə müəyyən bir hissəni çıxmalıyıq. Gəlin bu hissələri hesablayaq.

Bizim vəziyyətimizdə, dörd blok var, onların arasında isə üç boşluq - hər biri bir yarım faiz. Çıxılacaq hissəni hesablamaq üçün ümumi boşluğu blokların sayına bölmək lazımdır:

1.5% * 3 / 4 = 1.125

Onda hər bir blokun eni bərabər olacaq:

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

Aşağıdakı kod alınacaq:

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

Bu boşluğu özümüz hesablamaq əvəzinə, hesablama işini calc funksiyasına həvalə edə bilərik:

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

Blokun eninin hesablanmasını da calc funksiyasına həvalə edək:

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

Bloklara faizlə en təyin edin ki, plitədə sırada üç blok olsun və onların arasında 3% məsafə olsun.

Bloklara faizlə en təyin edin ki, plitədə sırada altı blok olsun və onların arasında 0.5% məsafə olsun.

Bloklara faizlə en təyin edin ki, plitədə sırada dörd blok olsun və bloklar arasında 30px məsafə olsun.

Bloklara faizlə en təyin edin ki, plitədə sırada beş blok olsun və bloklar arasında 50px məsafə olsun.