Grid Sistemleri: Sütun Sayısı, Oluk ve 8 Piksel Kuralı

Grid tartışması çoğu zaman sütun sayısında düğümleniyor: 12 mi, 8 mi, 4 mü. Oysa belirleyici olan sayının kendisi değil, içeriğin hangi ritimde tekrar ettiği. Sütunu, oluğu ve kenar boşluğunu içerikten türetince responsive davranış da arkadan kendiliğinden geliyor.

Hangi grid türü hangi soruyu çözer

Sütun gridi, aynı ağırlıktaki içerikleri yan yana dizmek için var: ürün kartları, makale listeleri, arama sonuçları. Modüler grid buna yatay satırları ekler ve kart yüksekliklerinin de hizalanmasını sağlar, yani asıl faydası galeri ve katalog gibi iki eksende de tekrar eden yapılarda ortaya çıkıyor. Hiyerarşik grid ise eşitliği bilerek bozar; manşet büyük alanı alır, yardımcı içerikler küçülür.

Peki bir sayfada birden fazla türün olması sorun mu? Değil. Haber anasayfasının üst bandı hiyerarşik, alt kısmı sütun gridi olabilir. Tutarlılık sütun sayısında değil, olukların ve kenar boşluklarının aynı kalmasında hissediliyor. Okur iki bölümü aynı sayfanın parçası olarak, sütunlar farklılaştığı halde, boşluklar aynı kaldığı için algılıyor.

12 sayısı keyfi değil

12 sütunun yaygınlaşmasının sebebi tam bölenleri: 2, 3, 4 ve 6. Yani aynı gridde ikili, üçlü, dörtlü ve altılı dizilişler kırpma yapmadan kuruluyor. 8 sütunda üçlü diziliş bozulur, 16'da da öyle. Mobilde 4 sütuna inilmesi de aynı mantığın devamı: ekranda zaten ikiden fazla kart yan yana durmuyor, 12 sütun tutmanın pratik karşılığı kalmıyor.

Ya içerik üçlü ritme hiç oturmuyorsa? O zaman sütun sayısını zorlamak yerine içeriği gruplamak daha iyi sonuç veriyor. Beş elemanlı bir listeyi 12 sütuna dağıtmaya çalışmak, her ekran genişliğinde yeni bir istisna doğuruyor.

8 piksel kuralı sütun genişliğinde tutmaz

Boşlukları 8'in katlarına oturtma alışkanlığı yaygın ve tasarım dosyasını gerçekten sadeleştiriyor. Ama aynı kuralı sütun genişliğine uygulamaya kalkınca aritmetik itiraz ediyor. 1200 piksellik bir kapsayıcıda 12 sütun ve aralarda 24 piksellik oluk düşünelim: 11 oluk 264 piksel eder, kalan 936 piksel 12'ye bölününce sütun başına 78 piksel çıkar. 78, 8'in katı değil. Oluğu 32'ye çıkarırsan sonuç daha da kötüleşir, sütun 70,67 pikselde kalır.

Zaten sütun genişliği gerçek hayatta sabit piksel olarak da yazılmıyor; yüzde ya da esnek birim olarak tanımlanıyor ve tarayıcı her ekran genişliğinde alt piksel yuvarlaması yapıyor. Bu yüzden tasarım dosyasında ölçülen bir piksellik farkı geliştiriciden düzeltmesini istemek boşa giden mesai oluyor: o fark koda değil, viewport genişliğine bağlı. 8 katı kuralı dikey ritimde, iç boşluklarda ve bileşen yüksekliklerinde işe yarar (yatayda da uygulanmasını savunanları biraz fazla katı buluyorum).

Oluk ve kenar boşluğu neye göre değişir

Oluk, iki içeriğin birbirine karışmaması için gereken en küçük mesafe. Kartların içinde gölge ya da çerçeve varsa oluk küçülebilir, çünkü ayrımı zaten görsel sınır yapıyor. Sınır yoksa oluğu açmak gerekiyor, yoksa iki kartın metni tek blok gibi okunuyor.

Kenar boşluğu ise farklı bir işi görüyor: mobilde parmağın ekran kenarında yarattığı ölü alanı hesaba katmak zorunda. 16 pikselin altına inen kenar boşluklarında dokunmatik hedefler kenara fazla yaklaşıyor ve kaydırma hareketiyle karışıyor.

Gridi kırmak

Bir görselin gridden taşması ya da bir bölümün tam genişliğe yayılması dikkat çekmek için kullanılan bilinen bir hamle. Sorusu şu: kırılan şey sütun hizası mı, yoksa boşluk ritmi mi? Sütun hizasını bozan bir görsel çoğunlukla sorun çıkarmıyor. Boşluk ritmi bozulduğunda ise sayfa dağınık görünmeye başlıyor, üstelik sebebi kolay teşhis edilmiyor.

Kırma kararının uygulama tarafında da bir bedeli var. Grid içinde kalan her bileşen aynı kapsayıcı kuralını paylaşır; taşan bileşen kendi genişlik hesabını taşır ve sonraki her düzen değişikliğinde ayrıca elden geçirilmesi gerekir. Sayfada böyle iki üç istisna varsa sorun değil, on tane varsa ortada grid kalmamış demektir.