CSS FLEXBOX GRID NE ZAMAN KULLANMAK

Flexbox tek eksende hizalama, Grid ise iki eksende matris düzeni için tasarlanmıştır; doğru soru "hangisi daha iyi?" değil "bu düzen problemi tek eksenli mi, iki eksenli mi?" sorusudur. Bu yazıda hangi düzen probleminde hangisini seçeceğinizi, ikisini birlikte nasıl kullanacağınızı ve sık yapılan layout hatalarından nasıl kaçınacağınızı öğreneceksiniz.

1. Flexbox: Tek Eksen Düşüncesi

Flexbox tek bir eksende eleman hizalar. Yatay (row) veya dikey (column) ama bir defada bir tane.

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Bu navigasyonda elementler bir sıra hâlinde yan yana dizilir. Yatay eksende dağıtılır, dikey eksende ortalanır; justify-content ve align-items'ın tüm değerleri için kapsamlı web teknolojileri dokümantasyonu başvurulabilecek en güvenilir kaynaktır. Eleman sayısı değişse de Flexbox kendine göre yeniden hizalar.

Flexbox'ın güçlü olduğu yerler:

• Navigation bar: Logo solda, menü ortada, buton sağda — tek yatay sıra.
• Card içi: Resim, başlık, açıklama, buton — alt alta veya yan yana tek eksende.
• Form satırları: Label, input, hata mesajı tek satır içinde.
• Buton grupları: Eşit dağılım veya merkezleme.
• Dinamik içerik: Eleman sayısı belirsiz; Flexbox space-between, space-around ile kendiliğinden dağıtır.

2. Grid: İki Eksen Düşüncesi

CSS Grid satır ve sütunlardan oluşan iki boyutlu bir koordinat sistemi kurar. Hem yatay hem dikey eksende kontrol sahibi olursun.

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
}

Bu yapı bir uygulama düzenini tek seferde tanımlar: solda sidebar, üst sağda header, ortada main, altta footer. Her bir hücre kendi yerini bilir.

Grid'in güçlü olduğu yerler:

• Sayfa iskeleti: Header, sidebar, main, footer gibi büyük blok düzeni.
• Galeri / katalog: Eşit hücreli ürün listesi, fotoğraf galerisi.
• Dashboard: Farklı boyutlardaki widget'ların matriste konumlanması.
• Form düzeni: Label sol kolonda, input sağ kolonda, hata mesajları altta — iki kolonlu yapı.
• Karmaşık layout: Bazı hücrelerin birden çok satır veya sütun kaplaması.

3. Pratik Karar Listesi

Karar verirken sorman gereken tek soru: "Bu düzen tek eksende mi çözülür, iki eksende mi?" Tek eksen = Flexbox. İki eksen = Grid.

4. İkisini Birlikte Kullanmak

Modern arayüzlerin çoğu Grid ve Flexbox'ı iç içe kullanır. Tipik bir senaryo:

.page {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
}

Burada sayfa iki kolonlu Grid; sidebar Flexbox kolonu; main Grid içinde üç sütunlu galeri; her card içinde Flexbox kolonu. Her birinin işi farklı, doğru yerinde.

Her container'a sorulacak soru

Bu yaklaşımı uygulamak için her container'a sormak gerekir: "Burada eleman tek sırada mı, yoksa düzenli matris mi?" Cevap kendiliğinden display: flex veya display: grid getirir.

5. Yaygın Flexbox Hataları

Yıllardır kod review'larda gördüğüm tipik hatalar:

• Sayfa iskeletini Flexbox ile kurmak: Header + sidebar + content yapısı Grid'in işi. Flexbox ile mümkün ama her şey nested oluyor ve responsive ayarı zor.
• justify-content ve align-items'ı karıştırmak: justify-content ana eksende, align-items karşı eksende. flex-direction: row'da yatay ve dikey; column'da bunlar yer değiştirir.
• gap yerine margin kullanmak: Modern tarayıcılarda flex container'da gap çalışır. Elemanlara ayrı ayrı margin atamak gereksiz.
• flex: 1 anlamı: flex: 1 aslında flex: 1 1 0 demek; grow=1, shrink=1, basis=0. Genelde istenen davranış flex: 1 1 auto yani basis content'e göre.
• flex-wrap ihmal: Mobil ekranda elemanlar taşıyor; flex-wrap: wrap eklenmemiş.

6. Yaygın Grid Hataları

• Sabit piksel kolonlar: grid-template-columns: 200px 600px 200px responsive değil. fr birimi ile akıcı yapı kurmak gerekiyor.
• repeat ve minmax kullanmamak: repeat(auto-fit, minmax(240px, 1fr)) ile ekran genişliğine göre kolon sayısı otomatik değişir. Media query gerektirmez.
• grid-template-areas'ı atlamak: Karmaşık düzenlerde area isimlendirme okunabilirliği muazzam artırır.
• Implicit grid bilgisini kullanmamak: Bilinmeyen sayıda satır gelecekse grid-auto-rows ile bunların boyutu tanımlanır. Atlanırsa içerik bozulur.
• Gap'i container'da değil elemanlarda margin olarak vermek: Grid container'da gap kullanılmalı; aksi takdirde kenar boşluklarını yönetmek karmaşıklaşır.

7. Responsive Strateji

Mobile-first yaklaşımda iki sistem birlikte çok güçlü:

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

Aslında bunu media query olmadan tek satırda yapmak mümkün:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

Bu yapı, ekranı minimum 280px hücrelere böler. Ekran 280px'lik 3 hücreye sığıyorsa 3 sütun, 2 sığıyorsa 2 sütun, 1 sığıyorsa tek sütun olur. Media query yok, kod temiz, performance iyi.

8. Subgrid ile Iç İçe Hizalama

CSS Subgrid modern tarayıcılarda artık desteklenen bir özellik. Bir grid item kendisi de grid olduğunda parent'ın izgarasını miras alabilir.

Tipik senaryo: bir card grid'inde her card içinde başlık, açıklama ve buton var. Cardlar'ın başlık alanları aynı yükseklikte hizalansın istiyorsun. Subgrid ile mümkün:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Bu yapıda her card 3 satırlı subgrid'e sahip olur ve parent grid satırlarıyla hizalanır. Eskiden bu hizalama için JavaScript veya min-height oyunları gerekiyordu.

9. Performance Notu

Flexbox ve Grid performance açısından birbirine yakın. Ölçülen tek anlamlı fark çok sayıda eleman olan listelerde Flexbox'ın layout maliyetinin biraz daha düşük olması. Ama pratikte 10.000 elemanlı virtual list yapmadığınız sürece bu fark görünmez.

Asıl sorun: gereksiz nesting

Asıl performance sorunu yanlış araç seçiminden değil, gereksiz nested kullanımdan gelir. Beş seviye iç içe Flexbox'la kurulmuş sayfa iskeleti hem zor okunur, hem layout pass'leri çoğalır. Doğru yerde Grid kullanmak hem kod sadeleşir hem performance düzelir.

Layout kararlarını modern CSS sistemleri üzerinden disiplinli alabilmek için kapsamlı web tasarımı eğitimi programı içinde Flexbox-Grid kombinasyonları, responsive stratejiler ve subgrid gibi yeni özellikler gerçek projeler üzerinden pratik edilir.

10. Karar Mantığını Kalıplaştırma

Yeni bir bileşeni kodlamadan önce kendine şu soruları sor:

1. Eleman tek sırada mı, yoksa düzenli bir matris mi olacak? → Tek sıra Flexbox, matris Grid.
2. Eleman sayısı sabit mi, dinamik mi? → Sabit ve şekilli iseGrid, dinamik ise wrap'li Flexbox.
3. Eleman boyutu içeriğe mi bağlı, kolona mı? → İçeriğe Flexbox, kolona Grid.
4. İki eksende kontrol gerekiyor mu? → Evet ise Grid kaçınılmaz.

Bu kararı 5 saniyede vermek, gereksiz refactor saatlerini önler. Yanlış araç seçilmiş bir layout ileride genişletirken sürekli sürtüşme yaratır; doğru seçim ile yapılan ise kendiliğinden büyür.