Grid Sistemi: Kolon, Gutter ve 12 Sayısının Matematiği

Grid, sayfayı dikey kolonlara ve aralarındaki boşluklara bölen bir hesap düzeni. Üç parçadan ibaret: kolon sayısı, kolon genişliği ve gutter. Geri kalan her şey bu üçünün aritmetiği, ve o aritmetik 960 ya da 1200 gibi sayıların tasarım şablonlarında neden tekrar tekrar karşımıza çıktığını da açıklıyor.

Üç parça

Kolon, içeriğin oturduğu dikey şerit. Gutter, iki kolon arasındaki boşluk; içerik oraya girmez, sadece nefes alanı. Margin ise gridin sayfa kenarına bıraktığı pay.

Buradaki tek kural, akılda tutulması gereken tek formülü de veriyor: n kolonlu bir gridde n değil, n-1 gutter vardır. Toplam genişlik = n × kolon + (n-1) × gutter. Kolon genişliğini gözle tahmin edip sonra taşan piksellerle uğraşan çok tasarım gördüm; sorun neredeyse her seferinde bu eksik gutter'da çıkıyor.

960 ve 1200 nereden geliyor

Klasik 960 piksellik şablonu açtığınızda 12 kolon, 60 piksel kolon genişliği ve 20 piksel gutter bulursunuz. Hesap tutuyor mu: 12 × 60 = 720, buna 11 × 20 = 220 eklenince 940 çıkar, iki uçta kalan 10'ar piksel de toplamı 960'a tamamlar. Aynı şablonun 16 kolonlu varyantında kolon 40 piksele iner: 16 × 40 + 15 × 20 = 940, yine aynı yere varır.

1200 piksel için de aynı işlemi ters çevirebilirsiniz. 12 kolon ve 24 piksel gutter istiyorsanız kolon genişliği (1200 - 11 × 24) / 12 = 78 piksel olur. Sayı tam çıktığı için bu kombinasyon yaygın; 25 piksel gutter denediğinizde kolon 77,08 pikselde takılır ve her kolonda biriken ondalık, sayfanın sağ ucunda gözle görülür bir kaymaya döner.

Neden özellikle 12

12'nin tercih edilmesinin sebebi estetik değil, bölenleri. 12 sayısı 2, 3, 4 ve 6'ya kalansız bölünür; yani aynı gridle iki eşit sütun, üç kart, dört kutu ya da altılı bir ikon şeridi kurabilirsiniz.

Karşılaştırın: 10 kolonlu bir grid yalnızca 2 ve 5'e bölünür, üçlü kart dizisi hiç çıkmaz. 16 kolon da 2'nin kuvveti olduğu için üçe bölünmez. Ürün listesi, blog kartı, fiyat tablosu gibi işlerin üçlü ve dörtlü düzenlerde yoğunlaştığını düşünürsek, 12 bu ihtiyaçların kesişimindeki en küçük sayı.

Hazır kolon sınıfları mı, CSS Grid mi

Hazır 12 kolon sınıflarını CSS Grid'den daha zayıf bir çözüm buluyorum, çünkü kolon sayısını HTML'e gömüyorlar. Mobilde üç kart yerine bir kart göstermek istediğinizde stile değil markup'a dokunmanız gerekir, üstelik aynı bilgiyi col-4 col-md-6 col-lg-12 gibi üç ayrı sınıfta tekrar edersiniz.

CSS Grid'de aynı iş tek satırda duruyor: grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)). Kolon sayısını tarayıcı, kullanılabilir genişliğe göre kendisi seçiyor; sizin belirlediğiniz şey kolonun minimum okunabilir genişliği oluyor, ki asıl karar da bu.

Hazır sınıfların hâlâ makul olduğu tek durum var: ekipteki herkesin bildiği bir çatı üzerinde hızlı prototip çıkarmak. Ürünleşecek bir arayüzde ise ilk fırsatta gridi CSS'e taşımaya değer.

Gridin bittiği yer

Grid yatay düzeni çözer, dikey ritmi çözmez. Satır yüksekliği, başlık ile paragraf arasındaki mesafe ve tipografik ölçek ayrı bir hesap ister; kolonlar kusursuz hizalanmışken sayfanın hâlâ dağınık görünmesinin sebebi çoğu zaman budur.

Bir de şu var: her öğeyi kolona yapıştırmak sayfayı öngörülebilir ama monoton yapar. Tek bir görselin ya da alıntının kasıtlı olarak grid dışına taşması, hiyerarşiyi tek hamlede kurar. Bunun işe yaraması için gridin önce var olması gerekiyor; kırılacak bir düzen yoksa taşma da taşma gibi görünmez, hata gibi görünür.

Sistemin kendisi yeni değil. 13. yüzyıl mimarı Villard de Honnecourt'un el yazması sayfa düzenlerinde de aynı mantık var: sabit kenar boşlukları, oranı korunan bir metin bloğu. Değişen tek şey, artık genişliğin sabit değil, ekrana göre esneyen bir değişken olması.