CSS Grid vs Flexbox: Hangi Durumda Hangisini Kullanmalı?

Modern web geliştirmede layout oluşturmak için iki güçlü araç bulunuyor: CSS Grid ve Flexbox. Her ikisi de güçlü layout sistemleri olmakla birlikte, farklı kullanım alanları için optimize edilmişler.

Flexbox: Tek Boyutlu Layout Sistemi

Flexbox, öğeleri bir satır veya sütun boyunca düzenlemek için tasarlanmış tek boyutlu bir layout sistemi.

Flexbox'ın Güçlü Yönleri

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* Navigation bar örneği */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

/* Card layout örneği */
.card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.card-header {
  flex: 0 0 auto; /* Sabit boyut */
}

.card-content {
  flex: 1; /* Kalan alanı doldur */
}

.card-footer {
  flex: 0 0 auto; /* Sabit boyut */
}

Flexbox Kullanım Durumları

✅ Flexbox'ı Şu Durumlarda Kullanın:

1. Navigation barları

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

.nav-left, .nav-right {
  display: flex;
  gap: 1rem;
}

2. Ortalama işlemleri

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

3. Eşit yükseklikli sütunlar

.equal-columns {
  display: flex;
  gap: 2rem;
}

.column {
  flex: 1; /* Eşit genişlik */
  background: white;
  padding: 2rem;
}

4. Form kontrolları

.form-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-label {
  flex: 0 0 150px; /* Sabit genişlik */
}

.form-input {
  flex: 1; /* Kalan alanı doldur */
}

Flexbox Avantajları

• Hızlı öğrenme: Basit syntax
• Tek boyut odaklı: Satır veya sütun bazlı düzenleme
• Mükemmel align: Öğeleri kolayca hizalama
• Responsive: Otomatik boyutlandırma
• Browser desteği: Mükemmel uyumluluk

CSS Grid: İki Boyutlu Layout Sistemi

CSS Grid, satır ve sütunları aynı anda kontrol edebilen iki boyutlu bir layout sistemi.

CSS Grid'in Güçlü Yönleri

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  min-height: 100vh;
}

/* Kompleks layout örneği */
.page-layout {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}

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

CSS Grid Kullanım Durumları

✅ CSS Grid'i Şu Durumlarda Kullanın:

1. Sayfa layouts

.page-grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
}

2. Card grid sistemleri

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

/* Masonry benzeri layout */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: masonry; /* Yakında geliyor */
  gap: 1rem;
}

3. Kompleks form layouts

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}

.full-width {
  grid-column: 1 / -1; /* Tüm sütunları kapla */
}

.form-actions {
  grid-column: 1 / -1;
  justify-self: end;
}

4. Gallery layouts

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

.featured-photo {
  grid-column: span 2;
  grid-row: span 2;
}

CSS Grid Avantajları

• İki boyutlu kontrol: Satır ve sütun kontrolü
• Kompleks layoutlar: Karmaşık tasarımları kolayca oluşturma
• Responsive magic: Auto-fit ve auto-fill
• Overlap: Öğeleri üst üste bindirme
• Grid areas: Semantic layout tanımlama

Karşılaştırmalı Örnekler

1. Navigation Bar

Flexbox Yaklaşımı:

.navbar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-brand {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-actions {
  display: flex;
  gap: 1rem;
}

Grid Yaklaşımı (önerilmez):

.navbar-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 1rem 2rem;
  gap: 2rem;
}

Sonuç: Navigation için Flexbox daha uygun.

2. Card Layout

Flexbox Yaklaşımı:

.cards-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.card-flex {
  flex: 1 1 300px; /* Grow, shrink, basis */
  min-width: 300px;
}

Grid Yaklaşımı:

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

Sonuç: Her ikisi de uygun, Grid daha kontrollü.

3. Page Layout

Flexbox Yaklaşımı (zor):

.page-flex {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-flex {
  display: flex;
  flex: 1;
}

.sidebar-flex {
  flex: 0 0 250px;
}

.main-flex {
  flex: 1;
}

Grid Yaklaşımı (kolay):

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

Sonuç: Page layout için Grid çok daha uygun.

Best Practices

Flexbox Best Practices

/* 1. Gap kullanın margin yerine */
.flex-container {
  display: flex;
  gap: 1rem; /* margin-right yerine */
}

/* 2. Flex shorthand kullanın */
.flex-item {
  flex: 1 0 200px; /* grow shrink basis */
  /* flex-grow: 1; flex-shrink: 0; flex-basis: 200px; yerine */
}

/* 3. align-items ve justify-content'i doğru kullanın */
.center-flex {
  display: flex;
  align-items: center; /* Cross axis */
  justify-content: center; /* Main axis */
}

/* 4. Responsive flex direction */
.responsive-flex {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .responsive-flex {
    flex-direction: row;
  }
}

CSS Grid Best Practices

/* 1. Semantic grid areas kullanın */
.semantic-grid {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "nav footer";
}

/* 2. Repeat() ve minmax() kullanın */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* 3. Grid line names kullanın */
.named-lines {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 250px 
    [sidebar-end main-start] 1fr 
    [main-end];
}

/* 4. Implicit grid kontrolü */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1rem;
}

Kombinasyon Kullanımı

/* Grid ana layout, Flexbox bileşenler için */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header {
  grid-area: header;
  display: flex; /* Flexbox navbar */
  justify-content: space-between;
  align-items: center;
}

.main {
  grid-area: main;
  display: grid; /* Grid content layout */
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

.article-content {
  display: flex; /* Flexbox makale içeriği */
  flex-direction: column;
  gap: 1rem;
}

Responsive Design Patterns

Flexbox Responsive Patterns

/* Stack to Row Pattern */
.flex-stack-to-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .flex-stack-to-row {
    flex-direction: row;
  }
}

/* Equal Width Columns */
.flex-equal-columns {
  display: flex;
  gap: 2rem;
}

.flex-equal-columns > * {
  flex: 1;
}

/* Sidebar Layout */
.flex-sidebar {
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 0 0 250px;
}

.content {
  flex: 1;
  min-width: 0; /* Overflow önleme */
}

Grid Responsive Patterns

/* Auto-fit Columns */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* Responsive Layout Areas */
.grid-responsive-areas {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
  gap: 1rem;
}

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

/* RAM (Repeat, Auto, Minmax) Pattern */
.grid-ram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2rem;
}

Performance Karşılaştırması

Flexbox Performance

/* İyi performans */
.good-flex {
  display: flex;
  gap: 1rem;
}

/* Kötü performans - gereksiz nesting */
.bad-flex .item {
  display: flex;
  justify-content: center;
}

.bad-flex .item .content {
  display: flex;
  align-items: center;
}

Grid Performance

/* İyi performans */
.good-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Kötü performans - gereksiz komplekslik */
.bad-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
}

Hangi Durumda Hangisini Seçmeli?

Flexbox Seçin Eğer:

✅ Navigation barları yapıyorsanız
✅ Button groups oluşturuyorsanız
✅ Centering işlemleri yapıyorsanız
✅ Equal height columns istiyorsanız
✅ Form controls düzenliyorsanız
✅ Media objects (image + text) yapıyorsanız

CSS Grid Seçin Eğer:

✅ Page layouts oluşturuyorsanız
✅ Card grids yapıyorsanız
✅ Complex forms tasarlıyorsanız
✅ Magazine-style layouts istiyorsanız
✅ Overlapping elements gerekiyorsa
✅ Two-dimensional control istiyorsanız

İkisini Birlikte Kullanın:

🎯 Grid ana layout için, Flexbox bileşenler için
🎯 Grid sayfayı böler, Flexbox içeriği düzenler
🎯 Grid structure, Flexbox styling

Sonuç

CSS Grid ve Flexbox birbirinin rakibi değil, tamamlayıcısıdır:

• Flexbox: Tek boyutlu, hızlı, component-level layout
• Grid: İki boyutlu, güçlü, page-level layout

Modern web geliştirmede her ikisini de öğrenmek ve doğru yerde doğru aracı kullanmak önemlidir. Çoğu projede Grid ve Flexbox'ı birlikte kullanarak en etkili sonuçları alabilirsiniz.

Tavsiye: Önce hangi problemi çözmeye çalıştığınızı belirleyin, sonra en uygun aracı seçin. Şüphe durumunda, basit layout'lar için Flexbox, kompleks layout'lar için Grid tercih edin. gap: 1rem; }

.flex-item { flex: 1; }

**Ideal kullanım alanları:**
- Navigation bar'lar
- Button grupları
- Form elementleri
- Card içerikleri
- Ortalama işlemleri

### Praktik Flexbox Örneği

```html
<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-items">
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Hakkımda</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
  <div class="actions">
    <button>Giriş</button>
  </div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-items {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
}

CSS Grid: İki Boyutlu Layout Sistemi

Grid, hem satır hem de sütunlarda kontrol sağlayan iki boyutlu bir layout sistemi.

Grid'in Güçlü Yönleri

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
  height: 100vh;
}

.header {
  grid-column: 1 / -1;
}

.main {
  grid-column: 1 / 3;
}

.sidebar {
  grid-column: 3;
}

.footer {
  grid-column: 1 / -1;
}

Ideal kullanım alanları:

• Sayfa layout'ları
• Responsive grid sistemleri
• Karmaşık düzenler
• Örtüşen öğeler
• Masonry layout'lar

Praktik Grid Örneği

<div class="page-layout">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Hangi Durumda Hangisini Kullanmalı?

Flexbox Kullan:

✅ Tek boyutlu düzenler için

/* Horizontal button group */
.button-group {
  display: flex;
  gap: 0.5rem;
}

✅ İçerik boyutuna göre esnek düzenler

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

.card-content {
  flex: 1; /* Kalan alanı kapla */
}

✅ Ortalama işlemleri

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

Grid Kullan:

✅ İki boyutlu layout'lar için

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

✅ Karmaşık responsive düzenler

.responsive-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(200px, auto);
}

✅ Overlapping öğeler

.hero-section {
  display: grid;
  grid-template-areas: "content";
}

.hero-bg,
.hero-content {
  grid-area: content;
}

Birlikte Kullanım

En güçlü yaklaşım, Grid ve Flexbox'ı birlikte kullanmak:

/* Grid ana layout için */
.page {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

/* Flexbox component'ler için */
.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

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

Responsive Design Karşılaştırması

Flexbox Responsive

.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 300px; /* grow shrink basis */
}

Grid Responsive

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

Performans Karşılaştırması

Özellik	Flexbox	Grid
Render Hızı	Daha hızlı	Biraz yavaş
Kompleks Layout	Zor	Kolay
Tarayıcı Desteği	Excellent	Çok İyi
Learning Curve	Kolay	Orta

Sonuç ve Öneriler

Kısa Özet:

• Flexbox: Tek boyutlu, basit, hızlı
• Grid: İki boyutlu, güçlü, kapsamlı

Pratik Karar Ağacı:

1. Tek boyutlu mı? → Flexbox
2. İki boyutlu mı? → Grid
3. Basit mi? → Flexbox
4. Karmaşık mı? → Grid
5. Her ikisi de çalışıyor mu? → Flexbox (daha basit)

Modern web geliştirmede her iki teknoloji de vazgeçilmez. Doğru aracı doğru yerde kullanmak, daha temiz ve sürdürülebilir kod yazmanızı sağlar.

Hangi durumda hangi layout sistemini tercih ediyorsunuz? Deneyimlerinizi yorumlarda paylaşabilirsiniz!