CSS Grid vs Flexbox: Hangisini Ne Zaman Kullanmalısın? Kapsamlı Karşılaştırma

Grid mi, Flexbox mu? Yanlış Soru!

CSS öğrenenler arasında en sık sorulan sorulardan biri: "Grid mi, Flexbox mu kullanmalıyım?" Aslında bu ikisi birbirinin rakibi değil, tamamlayıcısıdır. Doğru soru şu: "Bu düzen için hangisi daha uygun?" Bu rehberde her ikisini de ayrıntıyla inceleyeceğiz ve gerçek kod örnekleriyle doğru kullanım senaryolarını göstereceğiz.

Temel Fark: Boyut Ekseni

Özellik	Flexbox	CSS Grid
Boyut	1 Boyutlu (satır VEYA sütun)	2 Boyutlu (satır VE sütun)
Kontrol	İçerik sürücü (items)	Düzen sürücü (template)
İdeal Kullanım	Nav, buton grupları, kartlar	Sayfa iskelet, dashboard, galeri
Tarayıcı Desteği	Mükemmel (%98+)	Mükemmel (%97+)

Flexbox: İçerik Akışını Yönet

Flexbox, tek bir eksen (yatay veya dikey) üzerindeki öğeleri düzenlemek için tasarlanmıştır. Öğelerin boyutuna ve içeriğine göre alan dağıtır.

/* Klasik Navbar — Flexbox'ın ideal kullanımı */
.navbar {
  display: flex;
  align-items: center;        /* Dikey ortala */
  justify-content: space-between; /* İki uca yasla */
  gap: 16px;
  padding: 0 24px;
  height: 64px;
}

.navbar .logo { font-weight: 900; }
.navbar .nav-links { display: flex; gap: 24px; list-style: none; }
.navbar .auth-btn { margin-left: auto; } /* Sağa it */

/* Responsive Kart Listesi */
.card-list {
  display: flex;
  flex-wrap: wrap; /* Taşınca alt satıra geç */
  gap: 20px;
}

.card {
  flex: 1 1 280px; /* Min 280px, kalan alanı eşit böl */
  /* flex-grow: 1 — boş alanı al
     flex-shrink: 1 — gerekirse küçül
     flex-basis: 280px — başlangıç boyutu */
}

CSS Grid: Sayfa İskeleti Kur

Grid, hem satır hem sütun ekseni üzerinde tam kontrol sağlar. Karmaşık sayfa düzenleri için biçilmiş kaftandır.

/* Klasik 3 Sütunlu Blog Düzeni */
.page-layout {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  /* Sol sidebar | Ana içerik | Sağ sidebar */
  grid-template-rows: auto 1fr auto;
  /* Header | İçerik | Footer */
  gap: 24px;
  min-height: 100vh;
}

/* Named Template Areas ile okunabilir düzen */
.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
  grid-template-columns: 240px 1fr 300px;
  grid-template-rows: 64px 1fr 80px;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Responsive: Mobilde tek sütun */
@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .sidebar { display: none; } /* Sidebar gizle */
}

Güç Kombinasyonu: Grid + Flexbox Birlikte

Profesyonel layoutlarda her ikisi birlikte kullanılır. Grid büyük yapıyı, Flexbox küçük bileşenlerin içini düzenler:

/* Grid: Genel sayfa yapısı */
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 24px;
}

/* Flexbox: Kart içeriği */
.stat-card {
  display: flex;           /* Grid içinde Flexbox! */
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  background: #111;
  border-radius: 12px;
  border: 1px solid #222;
}

.stat-card .header {
  display: flex;           /* İkon + Başlık yan yana */
  align-items: center;
  gap: 12px;
}

.stat-card .value {
  font-size: 36px;
  font-weight: 900;
  margin-top: auto;
}

Altın Kural: Hangisini Ne Zaman Kullan?

• Flexbox kullan: Tek yönlü akış — navbar, buton grubu, kart listesi, form elemanları yan yana.
• Grid kullan: İki boyutlu düzen — sayfa iskelet, galeri, dashboard, tablo benzeri düzenler.
• İkisini birden kullan: Grid genel yapıyı belirlesin, Flexbox bileşen içlerini düzenlesin.