CSS'te Otomatik Genişlikli Bloklarla Izgara Sisteminde Boşluklar

Diyelim ki yan yana dört bloktan oluşan bir ızgara sistemimiz var:

.child {
	width: 25%;
}

Bloklarımıza yatay ve dikey yönde yüzde cinsinden boşluklar ekleyelim:

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

Şu ana kadar yaptıklarımız, blokların ve boşlukların toplam genişliği 100%'den büyük olduğu için doğru çalışmayacaktır. Doğru çalışması için, boşluklarımız için yer açmak amacıyla her bloktan belirli bir miktar kesmemiz gerekiyor. Bu miktarları hesaplayalım.

Bizim durumumuzda, dört blok ve aralarında üç adet - her biri %1.5 - boşluk var. Çıkarılacak miktarı hesaplamak için, toplam boşluk genişliğini blok sayısına bölmek gerekir:

1.5% * 3 / 4 = 1.125

O zaman her bir bloğun genişliği şöyle olacaktır:

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

Sonuçta aşağıdaki kod elde edilir:

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

Bu boşluğu kendimiz hesaplamak yerine, hesaplama işini calc fonksiyonuna bırakabiliriz:

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

Bloğun genişliğini de calc fonksiyonunun hesaplamasına izin verelim:

.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, ızgara sisteminde yan yana üç blok olacak ve aralarında 3% mesafe olacak şekilde yüzde cinsinden genişlik verin.

Bloklara, ızgara sisteminde yan yana altı blok olacak ve aralarında 0.5% mesafe olacak şekilde yüzde cinsinden genişlik verin.

Bloklara, ızgara sisteminde yan yana dört blok olacak ve aralarında 30px mesafe olacak şekilde yüzde cinsinden genişlik verin.

Bloklara, ızgara sisteminde yan yana beş blok olacak ve aralarında 50px mesafe olacak şekilde yüzde cinsinden genişlik verin.