Sayfa Düzeni ve Grid Sistemi Nasıl Oluşturulur?

Grid Sistemi Temelleri

Grid sistemi dört bileşenden oluşur: sütun (column), oluk (gutter), kenar boşluğu (margin), container. Sütun içerik alanı. Oluk sütunlar arası boşluk. Kenar boşluğu sayfa kenarlarından içeriğe mesafe. Container tüm yapıyı sarar, genişliği sınırlar.

12 sütun sistemi en yaygın seçim. Bootstrap, Foundation, Material Design hepsi 12 sütun kullanır. Neden? 12 bölünebilir: 2, 3, 4, 6. Bu esneklik layout varyasyonlarını kolaylaştırır. 3 sütun istersen 4+4+4, 2 sütun istersen 6+6, 4 sütun istersen 3+3+3+3 yaparsın. 10 sütun 3'e bölünmez, 16 sütun fazla karmaşık.

Sütun genişliği yüzde mi olmalı, sabit piksel mi? Yüzde responsive, ekran boyutuna göre değişir. Sabit piksel kontrollü görünür, responsive davranış zorlaşır. Modern yaklaşım ikisini birleştirir: width: 100%; max-width: 1200px;. Sütun esnek, üst sınır var.

Oluk 20-40px aralığında tutulur. Çok dar oluk elementleri sıkıştırır, çok geniş oluk boşluk israfı yaratır. Mobilde oluk azaltılabilir: masaüstü 30px, mobil 15px. Dikkat edilmesi gereken nokta: oluk değişimi breakpoint'te ani olmamalı, geçiş yumuşak olmalı.

Container maksimum genişlik 1200-1400px civarında tutulur. Çok geniş ekranlarda (2560px) içerik yayılmaz, okunabilirlik bozulur. Container ortalanır: margin: 0 auto. Bazı ekipler container'ı viewport genişliğinin %90'ı ile sınırlar, böylece çok geniş ekranlarda da kenar boşluğu orantılı kalır.

Flexbox vs CSS Grid

Grid sistemi nasıl kodlanır? İki yaklaşım var: flexbox, CSS grid. İkisi de güçlü, kullanım senaryoları farklı.

Flexbox tek boyutlu layout için tasarlandı. Satır veya sütun. Elementler yan yana dizilir veya alt alta. Tarayıcı desteği geniş, IE11 bile destekler. Navbar, card listesi, button grubu için ideal. İki boyutlu layout (satır + sütun aynı anda) yapmak zorlaşır, iç içe flexbox gerekir.

CSS Grid iki boyutlu layout için tasarlandı. Satır ve sütun aynı anda kontrol edilir. Karmaşık layout'lar kolay kurulur. Dashboard, magazin layout, form grid'i için ideal. IE11 desteği yok, eski tarayıcılarda fallback gerekir.

Hangisini seçmeli? Hibrit yaklaşım en mantıklısı. Ana sayfa yapısı CSS grid ile kurulur: header, main, sidebar, footer. Component içi layout flexbox ile yapılır: card listesi, button grubu, navbar. Grid büyük resim, flexbox detay.

Flexbox örnek: display: flex; gap: 20px;. Elementler yan yana dizilir, aralarında 20px boşluk olur. Responsive davranış için flex-wrap: wrap eklenir, elementler sığmazsa alt satıra geçer. Element genişliği flex: 0 0 calc(25% - 20px) ile kontrol edilir.

CSS Grid örnek: display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;. 12 sütun oluşur, eşit genişlikte, aralarında 20px boşluk. Element yerleştirme: grid-column: span 6, element 6 sütun kaplar. Responsive davranış media query ile kontrol edilir.

Gap property her ikisinde de çalışır. Eski yöntem margin ile boşluk bırakmaktı, yeni yöntem gap. Gap daha temiz, son elementin margin'ini sıfırlamaya gerek yok. Dikkat: IE11 gap'i desteklemez, fallback gerekir.

Breakpoint Stratejisi

Responsive tasarım breakpoint'ler ile çalışır. Hangi ekran boyutunda layout değişir? Yaygın breakpoint'ler: 576px (mobil), 768px (tablet), 992px (laptop), 1200px (desktop). Bu sayılar Bootstrap'tan gelir, standart haline gelmiş.

Mobile-first yaklaşım: küçük ekrandan başla, büyüğe git. @media (min-width: 768px). Mobil CSS önce yüklenir, tablet ve desktop CSS üstüne eklenir. Performans avantajı var, mobil cihazlar gereksiz CSS indirmez. Dezavantajı: masaüstü tasarım sonradan eklenir, bazen zorlanır.

Desktop-first yaklaşım: büyük ekrandan başla, küçüğe git. @media (max-width: 768px). Masaüstü CSS önce yüklenir, mobil CSS üstüne eklenir. Mobil cihazlar tüm CSS'i indirir, performans düşer. Mevcut site desktop-first ise geçiş zor olabilir, tüm media query'leri yeniden yazmak gerekir.

Mobile-first modern standart. Mobil trafik %60-70, mobil öncelikli mantıklı. Yeni projede mobile-first seç. Mevcut projede desktop-first ise, yavaş yavaş geçiş yap, tüm siteyi birden değiştirme.

Breakpoint sayısı 3-5 yeterli. Çok breakpoint bakım zorlaşır, her breakpoint'te test gerekir. Temel breakpoint'ler: mobil (320-767px), tablet (768-991px), desktop (992px+). Daha fazla breakpoint eklemek yerine fluid layout kullan, içerik ekran boyutuna göre otomatik uyum sağlar.

Custom breakpoint içerik belirler. Layout 850px'de bozuluyorsa 850px breakpoint ekle. Sabit breakpoint'lere takılma, içerik öncelikli. Örnek: sidebar 900px'de ana içeriği sıkıştırıyorsa, 900px'de sidebar'ı alta taşı.

Container ve Boşluk Stratejisi

Container içeriği sınırlar, ortalanır. İki yaklaşım: sabit container, fluid container.

Sabit container her breakpoint'te farklı genişlik alır. Mobil 100%, tablet 750px, desktop 1140px. Bootstrap bu yaklaşımı kullanır. Kontrollü, tutarlı görünür. Dezavantajı: breakpoint'ler arası geçişte ani genişlik değişimi olur, 767px'den 768px'e geçerken layout sıçrar.

Fluid container her zaman %100 genişlik, maksimum genişlik var. width: 100%; max-width: 1200px;. Kesintisiz, her ekran boyutunda uyum sağlar. Dezavantajı: çok geniş ekranlarda (2560px+) içerik yayılabilir, okunabilirlik düşer. Çözüm: maksimum genişliği viewport genişliğinin %90'ı ile sınırla.

Hibrit container: ana container sabit, bazı bölümler fluid. Hero section tam genişlik, içerik container'da. Görsel etki güçlü, içerik okunabilir. E-ticaret sitelerinde yaygın: ürün görseli tam genişlik, ürün bilgisi container'da.

Nested container genellikle gereksiz, layout karmaşıklaşır. İki container iç içe gelirse padding ve margin hesaplaması zorlaşır. İstisna: sidebar içinde widget container. Widget kendi padding'ini yönetir, sidebar padding'inden bağımsız.

Spacing scale tutarlı boşluk için gerekli: 4px, 8px, 16px, 24px, 32px, 48px, 64px. 8'in katları yaygın. Küçük boşluk (8px) elementler arası, büyük boşluk (48px) bölümler arası. Rastgele boşluk (13px, 27px) tutarsız görünür, tasarım disiplini bozulur.

Margin vs padding: margin dış boşluk, padding iç boşluk. Card örneği: padding içerik ile border arası, margin card'lar arası. Margin collapse dikkat: iki margin yan yana gelirse büyük olan geçerli olur, küçük olan yok sayılır. Padding collapse olmaz.

Vertical rhythm dikey boşluk tutarlılığı sağlar. Başlık altı 16px, paragraf arası 24px, bölüm arası 48px. Tutarlı ritim okunabilirlik artırır, sayfa dengeli görünür. Rastgele boşluk sayfa dağınık gösterir.

Responsive Davranış ve Layout Paternleri

Grid sistemi responsive olmalı. Masaüstünde 4 sütun, tablet'te 2 sütun, mobilde 1 sütun. Nasıl?

Flexbox responsive: flex-wrap: wrap. Elementler sığmazsa alt satıra geçer. Element genişliği: flex: 0 0 calc(25% - 20px). 4 sütun, aralarında 20px boşluk. Mobilde flex: 0 0 100%, tek sütun.

CSS Grid responsive: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). Otomatik sütun sayısı, minimum 250px, maksimum eşit. Ekran daralınca sütun azalır. Media query gerekmez, grid otomatik uyum sağlar.

Media query ile kontrol daha kesin: @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }. Tablet'te 2 sütun, mobilde 1 sütun. Hangi yaklaşım? Auto-fit basit layout için yeterli, karmaşık layout media query gerektirir.

Sütun sırası değişimi: order property. Mobilde sidebar altta, desktop'ta sağda. Flexbox ve grid'de çalışır. Dikkat: order SEO etkiler, HTML sırası değişmez, sadece görsel sıra değişir. Ekran okuyucular HTML sırasını takip eder.

Gizleme/gösterme: display: none mobilde gizle, desktop'ta göster. Dikkat: SEO için içerik HTML'de olmalı, CSS ile gizlenmeli. JavaScript ile gizleme SEO'ya zarar verir, içerik tarayıcı tarafından görülmez.

Holy Grail Layout: header, footer, main, sidebar. Klasik blog/haber sitesi yapısı. CSS Grid ile kolay: grid-template-areas: "header header" "sidebar main" "footer footer". Mobilde sidebar alta taşınır, tek sütun olur.

Card Grid: ürün kartları, blog kartları. Flexbox veya grid. Eşit yükseklik kartlar: flexbox align-items: stretch veya grid otomatik. Dikkat: kartlarda farklı uzunlukta içerik varsa, kısa kartlar uzun kartlar kadar yüksek olur, boşluk oluşur.

Masonry Layout: Pinterest gibi. Kartlar farklı yükseklik, boşluk yok. CSS Grid grid-auto-flow: dense kısmen çalışır, tam Masonry için JavaScript kütüphanesi (Masonry.js) gerekir. Performans maliyeti var, çok kart varsa yavaşlar.

Dashboard Layout: karmaşık, çok bölüm. CSS Grid ideal. Her widget grid area: grid-area: widget1. Responsive: widget sırası değişir, mobilde tek sütun, desktop'ta çok sütun. Dikkat: widget sayısı çok olursa mobilde sayfa uzar, kullanıcı kaybolur.

Performans ve Optimizasyon

Grid sistemi performansı etkiler mi? Evet, minimal. CSS Grid ve flexbox performanslı, eski yöntemler (float, table) yavaş. Float layout reflow tetikler, table layout tüm satırı yeniden hesaplar. Grid ve flexbox modern tarayıcılarda optimize edilmiş.

Layout shift (CLS): grid değişimi layout shift yaratır. Görsel yüklendi, layout değişti, CLS arttı. Çözüm: görsel boyutu belirt, width ve height attribute'leri ekle. Veya aspect-ratio kullan, tarayıcı yer ayırır.

Reflow: layout değişimi tarayıcı yeniden hesaplar. Pahalı işlem, 60fps düşer. Çözüm: transform ve opacity kullan, layout property'leri (width, height, margin, padding) değiştirme. Transform GPU'da çalışır, reflow tetiklemez.

CSS boyutu: grid sistemi CSS ekler. Bootstrap 150 KB, Tailwind 50 KB (purge sonrası), custom grid 5-10 KB. Gereksiz CSS temizle, PurgeCSS kullan. Dikkat: PurgeCSS dinamik sınıfları silebilir, whitelist ekle.

JavaScript dependency: bazı grid sistemleri JavaScript gerektirir (Masonry). Mümkünse CSS-only, JavaScript yedek. JavaScript yüklenmezse layout bozulur, kullanıcı deneyimi kötü olur. Progressive enhancement: CSS ile temel layout, JavaScript ile gelişmiş özellikler.

Framework vs Custom Grid

Bootstrap, Tailwind, Foundation kullanılmalı mı, custom grid mi? Proje büyüklüğüne ve ekip deneyimine bağlı.

Bootstrap: hazır grid, hızlı başlangıç. 12 sütun, responsive, test edilmiş. Dokümantasyon geniş, topluluk büyük. Dezavantajları: ağır (150 KB), özelleştirme zor, her site benzer görünür. Ekip Bootstrap biliyorsa hızlı başlarsınız, bilmiyorsa öğrenme eğrisi var.

Tailwind: utility-first, esnek. Grid sınıfları: grid grid-cols-12 gap-4. Hafif (purge sonrası 10-50 KB), özelleştirme kolay. Dezavantajları: öğrenme eğrisi, HTML şişer, sınıf sayısı artar. Ekip utility-first yaklaşımı seviyorsa Tailwind iyi seçim.

Custom grid: tam kontrol, hafif. Sadece ihtiyacınız olan kod. Dezavantajları: zaman alır, test gerekir, bakım sizde. Ekip CSS biliyorsa custom grid mantıklı, bilmiyorsa framework daha güvenli.

Hangi yaklaşım? Küçük proje (5-10 sayfa) custom grid yeterli. Orta proje (10-50 sayfa) Tailwind esnek. Büyük proje (50+ sayfa) Bootstrap güvenli. Başlangıçta framework kullan, olgunlaşınca custom geçiş yap. Dikkat: geçiş maliyeti yüksek, tüm sayfaları yeniden yazman gerekir.

Yaygın Hatalar ve Çözümleri

Tutarsız boşluk: bir yerde 15px, başka yerde 23px. Tasarım dağınık görünür, ekip her seferinde farklı değer kullanır. Çözüm: spacing scale belirle, 8'in katları kullan (8px, 16px, 24px, 32px). CSS değişkenleri ile tanımla: --spacing-sm: 8px; --spacing-md: 16px;.

Çok fazla breakpoint: 10 breakpoint, her birinde farklı layout. Bakım zorlaşır, her breakpoint'te test gerekir, bug riski artar. Çözüm: 3-5 breakpoint yeterli, içerik belirler. Fluid layout kullan, otomatik uyum sağlar.

Mobilde test yok: masaüstünde güzel, mobilde dağınık. Geliştirici masaüstünde çalışır, mobil test etmez. Çözüm: mobile-first yaklaşım, gerçek cihazda test. Chrome DevTools yeterli değil, gerçek cihaz davranışı farklı olabilir.

Sabit piksel genişlik: width: 300px, küçük ekranda taşar. Element container'dan çıkar, yatay scroll oluşur. Çözüm: yüzde veya max-width kullan. width: 100%; max-width: 300px; esnek ve güvenli.

Nested grid karmaşık: grid içinde grid içinde grid. Kod okunmaz, debug zor, performans düşer. Çözüm: basit tut, gerekmedikçe nested kullanma. İki seviye yeterli, üç seviye fazla.

Erişilebilirlik ihmal: klavye navigasyonu çalışmaz, focus görünmez. Ekran okuyucu kullanıcılar kaybolur. Çözüm: semantic HTML kullan, nav, main, aside etiketleri. ARIA landmark'ları ekle, klavye ile test et.

Performans ihmal: layout shift, reflow. Kullanıcı sayfayı okurken içerik kayar, yanlış yere tıklar. Çözüm: görsel boyutu belirt, width ve height attribute'leri ekle. Transform kullan, layout property'leri değiştirme. CLS metriğini Lighthouse ile ölç, 0.1'in altında tut.