Izgara Sistemleri

Görsel ilkeler bölümü hizalama eksenlerinin sayısını azaltmayı ve değerleri bir ölçeğe oturtmayı gerekli kıldı, ama bu eksenlerin ve değerlerin nereden geleceğini söylemedi. Değerler tek tek seçildiği sürece envanter yeniden şişer: bugün 24 piksel seçilir, yarın başka bir ekranda 28 piksel, iki hafta sonra kimse hangisinin doğru olduğunu bilemez.

Izgara (grid), bu seçimi türetmeye çeviren yapıdır. Bir kez dört sayı kararlaştırılır, kalan bütün yatay ölçüler bu dört sayıdan hesaplanır. Bu ders o aritmetiği kurar ve katalog arayüzünün sütun bölünmesini içerik ölçütleriyle sınar.

Izgaranın Dört Değişkeni

Bir sütun ızgarası dört sayıyla tanımlanır:

• Kapsayıcı genişliği, içeriğin yerleştiği alanın toplam genişliği.
• Kenar boşluğu (grid margin), kapsayıcının kenarı ile ilk ve son sütun arasında kalan şerit. CSS Temelleri kursunda margin özelliğinin karşılığı dış boşluk, padding özelliğinin karşılığı iç boşluk olarak sabitlenmişti; ızgaranın kenar boşluğu ise bir düzen kararıdır ve gerçekleştirimde bu iki özellikten biriyle kurulabilir.
• Sütun sayısı, içerik alanının kaç eşit paya bölündüğü.
• Oluk (gutter), iki komşu sütun arasındaki boşluk.

Bu dördü arasındaki bağıntı tektir:

$$\text{sütun} = \frac{\text{kapsayıcı} - 2 \cdot \text{kenar boşluğu} - (n - 1) \cdot \text{oluk}}{n}$$

Bağıntının önemi, sütun genişliğinin bağımsız bir karar olmamasıdır. Dört sayıdan üçü seçilir, dördüncüsü hesaplanır. Bir tasarımda “sütun 74 piksel olsun” diye bir karar verilmez; 74 çıkar.

Birden çok sütunu kaplayan bir bloğun genişliği de türetilir. Bir bloğun kapladığı sütun sayısına açılım (span) denir ve genişliği, kapladığı sütunlara ek olarak aralarındaki olukları da içerir: $n$ sütunluk bir açılım $n$ sütun genişliği artı $n-1$ oluk kadar yer kaplar.

Sütun Genişliği Türetilir

Aşağıdaki program sabit kenar boşluğu ve oluk değerleriyle farklı kapsayıcı genişlikleri için sütun genişliğini hesaplar, açılım genişliklerini çıkarır ve sütun sayısının bölünebilirliğini karşılaştırır.

// 06-izgara.mjs — sutun genisligi aritmetigi, acilim genislikleri ve bolunebilirlik

function izgara(kapsayici, kenar, sutunSayisi, oluk) {
  const icerik = kapsayici - 2 * kenar;
  const toplamOluk = (sutunSayisi - 1) * oluk;
  const sutun = (icerik - toplamOluk) / sutunSayisi;
  return { icerik, toplamOluk, sutun };
}

function acilim(n, sutun, oluk) {
  return n * sutun + (n - 1) * oluk;
}

const KENAR = 24;
const OLUK = 24;
const SUTUN_SAYISI = 12;

console.log("kapsayici  icerik  toplam oluk  sutun genisligi  tam sayi mi");
for (const k of [1440, 1280, 1200, 1024, 960, 768]) {
  const g = izgara(k, KENAR, SUTUN_SAYISI, OLUK);
  console.log(
    `${String(k).padStart(9)}  ${String(g.icerik).padStart(6)}  ${String(g.toplamOluk).padStart(11)}  ` +
      `${g.sutun.toFixed(3).padStart(15)}  ${Number.isInteger(g.sutun) ? "evet" : "HAYIR"}`
  );
}

console.log("");
const temel = izgara(1200, KENAR, SUTUN_SAYISI, OLUK);
console.log(`kapsayici 1200, kenar ${KENAR}, oluk ${OLUK}, ${SUTUN_SAYISI} sutun -> sutun ${temel.sutun}px`);
console.log("acilim  genislik  icerikteki pay");
for (const n of [3, 4, 6, 8, 9, 12]) {
  const g = acilim(n, temel.sutun, OLUK);
  console.log(
    `${String(n).padStart(6)}  ${String(g).padStart(8)}  ${((100 * g) / temel.icerik).toFixed(1).padStart(13)}%`
  );
}

console.log("");
console.log("sutun sayisi  bolenleri (1 ve kendisi haric)  esit parca secenegi");
for (const s of [8, 10, 12, 16]) {
  const bolenler = [];
  for (let d = 2; d < s; d++) if (s % d === 0) bolenler.push(d);
  console.log(`${String(s).padStart(12)}  ${bolenler.join(", ").padEnd(30)}  ${bolenler.length}`);
}

console.log("");
console.log("icerik tabanli denetim: suzgec paneli >= 240px, sonuc listesi >= 480px");
for (const kapsayici of [1200, 768]) {
  const g = izgara(kapsayici, KENAR, SUTUN_SAYISI, OLUK);
  console.log(`  kapsayici ${kapsayici}px  (sutun ${g.sutun}px)`);
  for (const [sol, sag] of [
    [3, 9],
    [4, 8],
    [5, 7],
  ]) {
    const solG = acilim(sol, g.sutun, OLUK);
    const sagG = acilim(sag, g.sutun, OLUK);
    const durum = solG >= 240 && sagG >= 480 ? "gecer" : "kalir";
    console.log(`    ${sol}+${sag} sutun -> ${solG}px + ${sagG}px  ${durum}`);
  }
}

kapsayici  icerik  toplam oluk  sutun genisligi  tam sayi mi
     1440    1392          264           94.000  evet
     1280    1232          264           80.667  HAYIR
     1200    1152          264           74.000  evet
     1024     976          264           59.333  HAYIR
      960     912          264           54.000  evet
      768     720          264           38.000  evet

kapsayici 1200, kenar 24, oluk 24, 12 sutun -> sutun 74px
acilim  genislik  icerikteki pay
     3       270           23.4%
     4       368           31.9%
     6       564           49.0%
     8       760           66.0%
     9       858           74.5%
    12      1152          100.0%

sutun sayisi  bolenleri (1 ve kendisi haric)  esit parca secenegi
           8  2, 4                            2
          10  2, 5                            2
          12  2, 3, 4, 6                      4
          16  2, 4, 8                         3

icerik tabanli denetim: suzgec paneli >= 240px, sonuc listesi >= 480px
  kapsayici 1200px  (sutun 74px)
    3+9 sutun -> 270px + 858px  gecer
    4+8 sutun -> 368px + 760px  gecer
    5+7 sutun -> 466px + 662px  gecer
  kapsayici 768px  (sutun 38px)
    3+9 sutun -> 162px + 534px  kalir
    4+8 sutun -> 224px + 472px  kalir
    5+7 sutun -> 286px + 410px  kalir

İlk tabloda dikkat çeken satırlar 1280 ve 1024 kapsayıcılarıdır: sütun genişliği tam sayı çıkmaz, 80.667 ve 59.333 olur. Bu, ızgaranın hizalama eksenlerinin tam piksel konumlarına düşmediği anlamına gelir.

Buradan çıkarılacak sonuç ızgarayı bozmak değildir. Sonuç şudur: ızgara bir piksel belirtimi değil, bir bölüştürme kuralıdır. Sütun genişliği kesirli çıktığında tasarım kararı “74 piksel” gibi ölçülmüş bir değere değil, “dört sütun açılımı” gibi bir orana bağlanır. Ölçülmüş değere bağlanan bir tasarım her kapsayıcı genişliğinde yeniden ölçülmek zorunda kalır; orana bağlanan tasarım kendiliğinden uyar. Kesirli genişliğin görsel bir dikiş izi bırakıp bırakmadığı çizim aşamasına bağlıdır ve tasarımın buna bağımlı olmaması gerekir.

İkinci tablo açılım genişliklerini veriyor. Katalog arayüzünde süzgeç paneli 3 sütun açılımıyla 270 piksel, sonuç listesi 9 sütun açılımıyla 858 piksel yer kaplar. Toplam 270 + 24 + 858 = 1152, yani içerik genişliğinin tamamı. Aradaki 24 piksel bir oluktur; iki bloğun arasına ayrıca boşluk eklenmez. Izgara kullanmanın en sık yapılan hatası, oluğun üstüne bir de dış boşluk koymaktır; sonuç, ızgarada olmayan bir eksen üretir.

Sütun Sayısı Neden On İki

Üçüncü tablo sütun sayısının neden keyfî olmadığını gösteriyor. Bir ızgaranın işi, içeriği eşit paylara bölebilmektir; dolayısıyla değerli olan sütun sayısı değil, o sayının kaç ayrı eşit bölünmeye izin verdiğidir.

On iki sütun 2, 3, 4 ve 6’ya bölünür: yarım, üçte bir, dörtte bir ve altıda bir düzenler kurulabilir. Sekiz sütun yalnız 2 ve 4’e bölünür; üçlü bir bölünme mümkün değildir. On altı sütun 2, 4 ve 8’e bölünür, üçlü bölünmeyi yine vermez ama daha ince ayar sağlar.

Bu, on ikinin bir kural olduğu anlamına gelmez. Ölçüt şudur: sütun sayısı, içeriğin gerektirdiği bölünmeleri karşılayan en küçük sayıdır. Katalog arayüzü ikili ve üçlü bölünme gerektiriyorsa on iki yeterlidir; yalnız ikili bölünme gerekiyorsa sekiz daha az karar üretir ve daha az karar daha az tutarsızlık demektir.

Izgarayı İçerikten Sınamak

Bir ızgara kendi başına doğru ya da yanlış değildir; içerikle sınandığında değerlendirilir. Katalog arayüzünün iki ölçütü vardır: süzgeç paneli, süzgeç etiketlerinin sarmadan sığması için en az 240 piksel; sonuç listesi, kayıt başlıklarının okunur satır uzunluğunu tutması için en az 480 piksel ister.

Dördüncü tablo bu ölçütü üç bölünmeye uyguluyor. 1200 piksellik kapsayıcıda üç bölünme de geçiyor; seçim başka gerekçelerle yapılır. 3+9 bölünmesi sonuç listesine en çok yeri verdiği için katalogda tercih edilir: ekranın birincil görevi sonuçları taramaktır, süzgeç ikincil bir araçtır.

768 piksellik kapsayıcıda ise hiçbir bölünme geçmiyor. 5+7 bölünmesi süzgeç için 286 piksel verir ama sonuç listesine yalnız 410 piksel kalır; 4+8 bölünmesinde iki ölçüt de kalır. Bu, ızgaranın bir başarısızlığı değil, ızgaranın verdiği bir bilgidir: bu genişlikte iki sütunlu bir düzen kurulamaz. İki bloğu yan yana tutmakta ısrar etmek, iki bloğu birden kullanılamaz hâle getirir.

Aynı hesap, düzen değişikliğinin nerede yapılacağını da söyler. Sonuç listesinin 480 piksel tutabilmesi için gereken en küçük kapsayıcı genişliği, 8 sütun açılımının 480’e eşit olduğu noktadan bulunur; bunun altında tek sütunlu düzene geçilir. Bu geçişin nasıl tanımlandığı Duyarlı ve Uyarlanabilir Düzen dersinin konusudur.

Izgara Türleri

Sütun ızgarası tek tür değildir; içerik yapısına göre başka ızgaralar seçilir.

• Elyazması ızgarası tek bir metin bloğu ve onu çevreleyen kenar boşluklarından oluşur. Kayıt ayrıntısındaki açıklama metni bu ızgarayı kullanır; bölünmeye ihtiyacı yoktur.
• Sütun ızgarası yukarıda hesaplanan yapıdır: yatay bölünme, dikey serbestlik.
• Modüler ızgara, sütun ızgarasına yatay bir bölünme daha ekler; satırlar da eşit yüksekliklere ayrılır. Kart biçiminde sunulan sonuç listeleri bu ızgarayı kullanır, çünkü kartların hem genişliği hem yüksekliği hizalanmalıdır.
• Taban çizgisi ızgarası, dikey ölçüyü metnin satır yüksekliğine bağlar; her metin satırı ortak bir yatay çizgiye oturur. Maliyeti yüksektir: farklı boyuttaki her metin düzeyinin satır yüksekliği ortak bir bölene uymak zorunda kalır.

Seçim ölçütü, içeriğin hangi eksende hizalanması gerektiğidir. Yalnız yatay hizalama gerekiyorsa sütun ızgarası yeter; dikey hizalama da gerekiyorsa modüler ya da taban çizgisi ızgarasının maliyeti göze alınır.

Özet

• Izgara dört sayıyla tanımlanır: kapsayıcı genişliği, kenar boşluğu, sütun sayısı ve oluk. Sütun genişliği bağımsız bir karar değil, bu dördünden türeyen bir sonuçtur.
• Bir açılımın genişliği kapladığı sütunlar ile aralarındaki olukların toplamıdır; ızgaraya yerleşen bloklar arasına ayrıca boşluk eklenmez, oluk bu işi zaten yapar.
• Sütun genişliği her kapsayıcıda tam sayı çıkmaz; tasarım ölçülmüş piksel değerine değil açılım oranına bağlanır.
• Sütun sayısının değeri kaç eşit bölünmeye izin verdiğidir; on iki sayısı 2, 3, 4 ve 6’ya bölündüğü için yaygındır, ama ölçüt içeriğin gerektirdiği bölünmeleri karşılayan en küçük sayıdır.
• Izgara, içeriğin en küçük genişlik gereksinimleriyle sınanır; hiçbir bölünmenin ölçütü karşılamadığı genişlik, düzenin değişmesi gereken noktayı işaret eder.
• Izgara türü içeriğin hangi eksende hizalanacağına göre seçilir; dikey hizalama gerekmiyorsa modüler ve taban çizgisi ızgaralarının maliyeti ödenmez.

Sonraki Adım

Izgara yatay ölçüyü türetilir hâle getirdi: sütun sınırları artık seçilmiyor, hesaplanıyor. Dikey ölçü ise hâlâ serbest — oluk 24 piksel seçildi, kenar boşluğu 24 piksel seçildi, ama bu sayıların nereden geldiği söylenmedi. Yinelenme dersinde çıkarılan envanter tam da bu boşlukta şişmişti. Sonraki ders aralık değerlerini bir üretim kuralına bağlar: doğrusal, geometrik ve karma ölçekleri hesaplayarak karşılaştırır ve katalog arayüzünün 13 ham aralık değerini kaç adımlı bir ölçeğin karşıladığını ölçer.