--- title: 'Izgara Sistemleri' source: 'https://academia.sh/tr/kurslar/arayuz-temelleri/izgara-sistemleri' course: 'Arayüz Tasarımının Temelleri' language: tr updated: '2026-08-17T18:09:36+00:00' license: 'CC BY-SA 4.0' --- # Izgara Sistemleri Kapsayıcı, kenar boşluğu, sütun sayısı ve oluk arasındaki aritmetik ilişki; sütun genişliğinin türetilmesi, açılım hesabı ve ızgaranın içerik ölçütleriyle sınanması. 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. ```js // 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.