CSS Flexbox ve Grid farkı: hangi yerleşimde hangisini seçmeli?

Flexbox, ağırlıklı olarak tek bir eksendeki öğeleri hizalamak için; CSS Grid ise satır ve sütun ilişkisini birlikte kurmak için uygundur. Menüde Flexbox, düzenli kart alanında Grid iyi bir başlangıç seçimi olabilir. Bunlar zorunlu eşleştirmeler değildir: kararını tasarımın ilişkisi belirler.

Hangi soruyu sorarak karar vermelisin?

Öğeleri yan yana veya alt alta hizalamak mı istiyorum? Önce Flexbox’ı düşün. Satıra sığmayan öğeler için flex-wrap kullanılabilir; yeni satırın yerleşimi önceki satırdan bağımsızdır.

Farklı satırlardaki kartların aynı sütun çizgilerine oturması mı gerekiyor? Grid bu ilişkiyi açıkça tanımlar. Bir sayfada ikisini birlikte kullanabilirsin: dış yerleşim Grid, kartın içindeki düğme grubu Flexbox olabilir.

Çalışan örnek: menü ve kartlar

Aşağıdaki içeriği index.html olarak kaydedip tarayıcıda aç. Geniş ekranda kartlar iki sütundur. Pencereyi 600 piksel ve altına daraltınca tek sütuna geçer. Menü öğeleri sığmadığında yeni satıra iner.

<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flexbox ve Grid denemesi</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 24px; font-family: sans-serif; }
    nav { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
    nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px; }
    .kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    article { min-width: 0; padding: 24px; border: 1px solid #64748b; border-radius: 12px; }
    h2 { margin-top: 0; }
    p { line-height: 1.6; }
    @media (max-width: 600px) {
      body { padding: 16px; }
      .kartlar { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>
  <nav aria-label="Ders bağlantıları">
    <a href="#html">HTML</a><a href="#css">CSS</a>
  </nav>
  <main class="kartlar">
    <article id="html"><h2>HTML</h2><p>İçeriğin yapısını kur.</p></article>
    <article id="css"><h2>CSS</h2><p>Yerleşimi ve boşlukları düzenle.</p></article>
  </main>
</body>
</html>

Boşluk ve taşma hatalarını nasıl ayırırsın?

Bu örnekte gap kartların arasındaki uzaklıktır; padding kartın iç kenar payıdır. İkisini aynı sorun için rastgele büyütme. Önce sorun kartın içinde mi, kartlar arasında mı diye bak.

Sabit genişlikli bir kart dar ekrana sığmayabilir. Burada sütunlar kalan alanı paylaşır ve küçük ekranda tek sütun olur. Çok uzun, bölünmeyen bir bağlantı yine taşabilir; kendi gerçek içeriğinle ayrıca dene.

Sık sorulanlar

Flexbox sadece yatay mı çalışır? Hayır. flex-direction: column ile ana ekseni dikey kurabilirsin.

Grid yalnız masaüstünde mi kullanılır? Hayır. Yukarıdaki tek sütun mobil düzeni de Grid’dir.

Hangisi daha iyi? Tek bir kazanan arama. İhtiyacın satır içi hizalama mı, ortak sütun düzeni mi olduğuna karar ver.

Sıra sende: sonucu önce tahmin et

1. gap değerini 16px yerine 32px yap. Kartın iç boşluğu değişiyor mu?
2. Geniş ekrandaki sütun sayısını üçe çıkar.
3. İki kart daha ekle ve 390 piksel genişlikte kontrol et.

Kontrol: ilk değişiklik kartların arasını açar; iç kenar payını değiştirmez. Dar görünümde kartlar tek sütun kalmalı, sayfa yatay kaymamalıdır.

Bağlantılı okuma ve kaynak

Katmanların görevini karıştırıyorsan önce HTML, CSS ve JavaScript farkını oku. Ardından programlama derslerine göz at.

Teknik başvuru: MDN — Grid ve diğer yerleşim yöntemlerinin ilişkisi.

Atlas, platformun yapay zekâ destekli öğrenme asistanıdır. Bu yazıdaki karşılaştırma şeması ve örnek bu seri için özgün olarak hazırlanmıştır.