CSS Flexbox vs Grid: Hangisini Ne Zaman Kullanmalı?

CSS Flexbox ve CSS Grid, modern CSS'teki en güçlü iki düzen sistemidir. Bazen benzer sonuçlar üretebilseler de, farklı problemler için tasarlanmış temelde farklı araçlardır. Her durum için doğru düzen yaklaşımını seçmek, CSS'inizi daha temiz, daha sürdürülebilir ve daha öngörülebilir kılar. Bu rehber, düzen kararlarınızı güvenle vermenizi sağlayacak ayrıntılı bir karşılaştırma ve pratik kod örnekleri sunar.

CSS Flexbox Nedir?

CSS Esnek Kutu Düzeni, yaygın olarak Flexbox olarak bilinir, tek boyutlu bir düzen modelidir. Tek bir eksen (yatay satır veya dikey sütun) boyunca alan dağıtımında üstündür. Flexbox, bir konteyner içindeki öğelerin esnek bir şekilde büyümesini, küçülmesini ve kullanılabilir alana göre kendini hizalamasını sağlar.

Flexbox, geleneksel CSS'te kötü şöhretli şekilde zor olan yaygın düzen problemlerini çözmek için tasarlanmıştır: öğeleri dikey olarak ortalamak, kardeş öğeler arasında alanı eşit dağıtmak ve HTML'i değiştirmeden içeriği yeniden sıralamak. Flexbox'tan önce, geliştiriciler bu efektleri elde etmek için float, inline-block hileleri ve tablo düzenlerine güvenirdi.

Flexbox Temel Kavramları

• Flex Konteyner: display: flex uygulanmış üst öğe.
• Flex Öğeleri: Flex konteynerin doğrudan alt öğeleri.
• Ana Eksen: Düzenin birincil yönü (varsayılan olarak yatay, flex-direction tarafından kontrol edilir).
• Çapraz Eksen: Ana eksene dik yön.
• Flex Büyüme/Küçülme/Taban: Öğelerin kullanılabilir alanı doldurmak için nasıl genişleyeceğini ve daralacağını kontrol eden özellikler.

Flexbox Örneği: Navigasyon Çubuğu

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar__logo {
  flex-shrink: 0;
}

.navbar__links {
  display: flex;
  gap: 16px;
  list-style: none;
}

Bu navigasyon çubuğu, justify-content: space-between ile logoyu sola ve bağlantıları sağa itmek için Flexbox kullanır. Öğeler align-items: center ile dikey olarak ortalanır. Bu, Flexbox'ın doğal seçim olduğu klasik bir tek boyutlu düzendir.

CSS Grid Nedir?

CSS Grid Düzeni, iki boyutlu bir düzen sistemidir. Satır ve sütunları aynı anda ele alır ve bir ızgara yapısı içindeki öğelerin konumunu ve boyutunu hassas bir şekilde kontrol etmenizi sağlar. Grid, minimum kodla karmaşık düzenler oluşturmak için açık izler, alanlar ve yerleştirme kuralları tanımlamanıza olanak tanır.

Grid, her iki boyutu da kontrol etmeniz gereken sayfa düzeyinde düzenler ve karmaşık bileşen yapıları için tasarlanmıştır. Daha önce imkansız olan düzenleri basit ve anlaşılır kılan adlandırılmış ızgara alanları, auto-fill ve auto-fit ile açık satır ve sütun boyutları gibi kavramları tanıtır.

Grid Temel Kavramları

• Grid Konteyner: display: grid uygulanmış üst öğe.
• Grid Öğeleri: Grid konteynerin doğrudan alt öğeleri.
• Grid İzleri: grid-template-rows ve grid-template-columns tarafından tanımlanan satır ve sütunlar.
• Grid Çizgileri: Yerleştirme için kullanılan, iz sınırlarını oluşturan görünmez çizgiler.
• Grid Alanları: Öğelerin atanabileceği adlandırılmış ızgara alanları.
• Boşluk: Izgara izleri (satırlar ve sütunlar) arasındaki boşluk.

Grid Örneği: Sayfa Düzeni

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  min-height: 100vh;
}

.page__header  { grid-area: header; }
.page__sidebar { grid-area: sidebar; }
.page__content { grid-area: content; }
.page__footer  { grid-area: footer; }

Bu sayfa düzeni, klasik bir kenar çubuğu düzeni oluşturmak için adlandırılmış ızgara alanlarını kullanır. Üstbilgi ve altbilgi iki sütuna yayılırken, kenar çubuğu ve içerik yan yana yerleştirilir. Bu iki boyutlu yapı, Grid'in gerçekten parladığı yerdir.

Flexbox vs Grid: Yan Yana Karşılaştırma

Flexbox Ne Zaman Kullanılır

Düzen probleminiz öncelikle tek boyutlu olduğunda, Flexbox doğru seçimdir. İşte en yaygın senaryolar:

1. Navigasyon Çubukları ve Menüler

Navigasyon, esasen bir satır (veya sütun) öğedir. Flexbox, öğeler arasında alan dağıtır, taşmayı zarif bir şekilde ele alır ve öğelerin dikey hizalanmasını basitleştirir. gap özelliği, eski margin tabanlı menü öğesi aralığının yerini alır.

2. İçeriği Ortalama

.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Bu üç satırlık ortalama çözümü, en sevilen Flexbox desenlerinden biridir. Flexbox'tan önce, dikey ortalama table-cell, transform ile absolute konumlandırma veya line-height hileleri içeren hack'ler gerektiriyordu. Flexbox bunu zahmetsiz hale getirir.

3. Kart İçerik Hizalama

Kartların başlık, açıklama ve eylem düğmesi olduğu ve içerik uzunluğundan bağımsız olarak düğmenin her zaman altta sabitlenmesini istediğiniz durumlarda, Flexbox bunu zarif bir şekilde ele alır:

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

.card__content {
  flex: 1;
}

İçerik alanındaki flex: 1, mevcut alanı doldurmak için büyümesini sağlar ve düğmeyi kartın altına iter. Kartın ne kadar metin içerdiğinden bağımsız olarak çalışır.

4. Form Satır Düzeni

Arama girişi ve gönder düğmesi gibi bir satırda sıralanması ve yeniden boyutlandırılması gereken form öğeleri Flexbox için idealdir. Giriş, mevcut alanı doldurmak için büyüyebilirken, düğme doğal boyutunu korur.

5. Medya Nesnesi

Klasik medya nesnesi deseni (sol resim, sağ metin) Flexbox'ın doğal eşleşmesidir. Resim doğal genişliğini korurken, metin kalan alanı doldurur.

CSS Grid Ne Zaman Kullanılır

Düzeniniz hem satırları hem de sütunları aynı anda kontrol etmeyi veya tanımlanmış bir yapı içinde öğeleri hassas bir şekilde yerleştirmeyi gerektirdiğinde, Grid doğru seçimdir.

1. Tam Sayfa Düzeni

Üstbilgi, kenar çubuğu, içerik alanı ve altbilgi içeren sayfa düzeyinde düzenler, klasik Grid kullanım durumudur. Adlandırılmış ızgara alanları, düzeni okunabilir ve sürdürülebilir kılar:

.layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header  header"
      "content sidebar"
      "footer  footer";
  }
}

Duyarlı kesme noktasının ızgara şablonunu ne kadar basit bir şekilde yeniden tanımladığına dikkat edin. Öğeler atandıkları ızgara alanlarını korur ve düzen otomatik olarak yeniden yapılandırılır. Bu, farklı kesme noktalarında Flexbox konteynerlerini yeniden düzenlemekten çok daha temizdir.

2. Kart Izgaraları ve Galeriler

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

Bu tek bildirim, kullanılabilir genişliğe göre sütun sayısını otomatik olarak ayarlayan duyarlı bir kart ızgarası oluşturur. Her kart en az 280px genişliğindedir ancak kalan alanı doldurmak için büyür. Medya sorgusu gerekmez. minmax ile bu auto-fill deseni, en güçlü Grid tekniklerinden biridir.

3. Gösterge Paneli Düzeni

Birden fazla satır ve sütuna yayılan farklı boyutlardaki widget'lara sahip gösterge panelleri, Grid için idealdir. Öğeleri belirli ızgara konumlarına yerleştirebilir ve izler boyunca yayabilirsiniz:

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 16px;
}

.widget--wide { grid-column: span 2; }
.widget--tall { grid-row: span 2; }
.widget--hero { grid-column: span 2; grid-row: span 2; }

4. Dergi ve Editoryal Düzen

İçeriğin örtüşmesi veya sıralı olmayan konumlara yerleştirilmesi gerektiğinde, Grid bunu doğal olarak destekleyen tek CSS düzen sistemidir. Öğeleri belirli ızgara çizgilerine yerleştirebilir ve absolute konumlandırma olmadan örtüşen kompozisyonlar oluşturabilirsiniz.

5. Kutsal Kase Düzeni

Ünlü 'Kutsal Kase' düzeni (üstbilgi, sabit genişlikli kenar çubukları ve esnek merkez ile üç sütunlu gövde, altbilgi) Grid ile çocuk oyuncağıdır:

.holy-grail {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Flexbox ve Grid'i Birlikte Kullanma

En etkili yaklaşım, Flexbox ve Grid arasında seçim yapmak değil, onları stratejik olarak birleştirmektir. Yaygın ve önerilen bir desen, makro düzen (sayfa yapısı) için Grid, mikro düzen (bileşen içi) için Flexbox kullanmaktır.

Örnek: Grid ve Flexbox ile Gösterge Paneli

/* Grid for the page structure */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  min-height: 100vh;
}

/* Flexbox for the header content */
.dashboard__header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

/* Flexbox for sidebar menu items */
.dashboard__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

Bu örnekte, Grid genel sayfa yapısını tanımlarken, Flexbox her bölüm içindeki hizalamayı ele alır. Bu görev ayrımı, CSS'inizi düzenli ve amaç odaklı tutar.

Duyarlı Tasarım Desenleri

Flexbox Duyarlı Desen: Kaydırma

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  flex-shrink: 0;
}

Flexbox kaydırma, etiket listeleri, çip setleri ve yatay alan yetersiz olduğunda doğal olarak bir sonraki satıra akan herhangi bir öğe koleksiyonu için harikadır. Her öğe doğal boyutunu korur.

Grid Duyarlı Desen: Otomatik Doldurma

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

Grid auto-fill, herhangi bir medya sorgusu olmadan gerçekten duyarlı bir ızgara oluşturur. Sütun sayısı, konteyner genişliğine göre otomatik olarak ayarlanır ve her sütun en az 300px'dir. Bu, Flexbox kaydırmadan daha güçlüdür çünkü öğeler satırı eşit şekilde doldurmak için esner.

Grid Duyarlı Desen: Yığınlama

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Yaygın Hatalar ve Nasıl Kaçınılır

• Tek satırlı düzenler için Grid kullanmak: Yalnızca bir satır veya sütunda öğelere ihtiyacınız varsa, Flexbox daha basit ve daha uygundur. Tek bir grid-template-columns satırıyla display: grid kullanmak genellikle aşırı mühendisliktir.
• İki boyutlu düzenler için Flexbox kullanmak: İç içe flex konteynerlerle ızgara düzeni oluşturmaya çalışmak, kırılgan ve bakımı zor kodlara yol açar. Hem satırları hem de sütunları kontrol etmeniz gereken herhangi bir düzen için Grid kullanın.
• gap'i unutmak: Hem Flexbox hem de Grid, gap özelliğini destekler. Öğeler arasındaki boşluğu ayarlamak için margin yerine bunu kullanın. Yalnızca öğeler arasına uygulanır, kenarlara değil, ki bu genellikle tam olarak istediğiniz şeydir.
• width ile flex-basis'i geçersiz kılmak: Bir flex konteynerinde, flex-basis ana eksende width'e göre önceliklidir. İkisini birden ayarlamak beklenmeyen davranışa yol açabilir. Karışıklığı önlemek için flex kısayolunu kullanın.
• minmax kullanmamak: Grid sütunlarını tanımlarken, sütunların çok küçük veya çok büyük olmasını önlemek için her zaman minmax() kullanmayı düşünün. 1fr olarak tanımlanan bir sütun sıfıra kadar küçülebilir; minmax(200px, 1fr) minimum genişliği garanti eder.
• Örtük ızgarayı göz ardı etmek: Tanımlanmış ızgara izlerinizden daha fazla öğeniz olduğunda, Grid örtük izler oluşturur. Bu örtük izlerin boyutunu kontrol etmek için grid-auto-rows ve grid-auto-columns kullanın.

Tarayıcı Desteği

Flexbox ve Grid, 2026'da mükemmel tarayıcı desteğine sahiptir:

Her iki teknoloji de tüm büyük tarayıcılarda yıllardır tamamen desteklenmektedir. Modern web geliştirmede, uyumluluk endişeleri nedeniyle ikisinden de kaçınmak için bir neden yoktur. Flexbox'taki gap özelliği, evrensel destek alan son büyük özellikti ve 2021'den beri tüm tarayıcılarda mevcuttur.

Hızlı Karar Rehberi

Yeni bir düzene başlarken kendinize şu soruları sorun:

• Hem satırları hem de sütunları aynı anda kontrol etmem gerekiyor mu? Evet — Grid. Hayır — Flexbox.
• İçerik mi düzen boyutunu belirlemeli, yoksa düzen mi içerik yerleşimini belirlemeli? İçerik odaklı — Flexbox. Düzen odaklı — Grid.
• Öğelerin doğal olarak kaydırılması gerekiyor mu? Evet — flex-wrap ile Flexbox veya auto-fill ile Grid.
• Öğelerin örtüşmesi gerekiyor mu? Evet — Grid.
• Bu daha büyük bir düzenin içindeki bir bileşen mi? Bileşen muhtemelen Flexbox, daha büyük düzen Grid.