CSS Grid ve Flexbox: Modern Layout Teknikleri

Birkaç yıl öncesine kadar web sitelerinde bir öğeyi yatay ve dikeyde tam ortalamak, geliştiriciler arasında bir şaka konusuydu. Ancak Flexbox (Flexible Box Layout) ve hemen ardından gelen CSS Grid Layout ile bu sorunlar tamamen tarihe karıştı. Bu rehberde, hangi aracı ne zaman kullanmanız gerektiğini inceleyeceğiz.

1. Flexbox: Tek Boyutlu Dizilimler

Flexbox, öğeleri tek bir eksende (sadece yatay veya sadece dikey) dizmek için tasarlanmıştır. İçeriklerin boyutları değişken olsa bile, aralarındaki boşlukları veya hizalamaları dinamik olarak ayarlamakta üstüne yoktur.

En İyi Kullanım Senaryoları: Navbar'lar (Gezinme menüleri), buton grupları, etiket listeleri, dikeyde ortalanması gereken öğeler.

/* Tipik bir Header / Navbar Flexbox Kullanımı */
.header {
  display: flex;
  justify-content: space-between; /* Sol ve sağ kenarlara yasla */
  align-items: center; /* Dikey eksende ortala */
  padding: 0 20px;
  height: 70px;
}

/* Flex öğeleri arasındaki boşluğu belirleme (Gap) */
.nav-links {
  display: flex;
  gap: 24px; /* Tüm linkler arası 24px boşluk (margin'e gerek yok!) */
}

Önemli Flexbox Özellikleri:

• flex-direction: column — Öğeleri alt alta dizer. Mobil görünümler için harikadır.
• flex-wrap: wrap — Sığmayan öğeleri alt satıra atar (Örn: etiket listeleri).
• flex: 1 — Öğenin kalan tüm boşluğu kaplamasını sağlar.

2. CSS Grid: İki Boyutlu Düzenler

Grid, adından da anlaşılacağı gibi web sayfanızı satırlara ve sütunlara (bir tablo gibi) böler. Hem yatay hem de dikey ekseni aynı anda kontrol edebilirsiniz. Büyük sayfa yapılarını (Header, Sidebar, Main, Footer) kurmak için kusursuzdur.

En İyi Kullanım Senaryoları: Tüm sayfanın iskeleti, fotoğraf galerileri, ürün kartları listesi, bento grid tasarımlar.

/* Temel bir Responsive Sayfa İskeleti */
.site-layout {
  display: grid;
  /* 3 sütun: 1. sütun 250px, diğerleri kalan boşluğu paylaşır */
  grid-template-columns: 250px 1fr 1fr;
  /* 2 satır: Üst 70px (header), alt satır içeriğe göre uzar */
  grid-template-rows: 70px minmax(500px, auto);
  gap: 20px;
}

/* Sütun ve satırları birleştirme */
.header-alani {
  /* 1. sütundan başla, en sona kadar uzan (tüm satırı kapla) */
  grid-column: 1 / -1; 
}

En Güçlü Grid Özelliği: auto-fit ve minmax()

CSS Grid ile hiç Media Query (@media) yazmadan mükemmel responsive (duyarlı) kart listeleri yapabilirsiniz:

.kart-listesi {
  display: grid;
  /* Kartlar min 300px olacak, sığarsa yan yana, sığmazsa alt alta! */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

3. Grid mi Flexbox mı? Birlikte Kullanım!

Yeni başlayanların en çok sorduğu soru: "Hangisini kullanmalıyım?" Cevap: İkisini de! Rakip değiller, birbirlerini tamamlarlar.

4. CSS Grid Alanları (Grid Template Areas)

Grid'in en sevilen özelliklerinden biri, sayfa yapısını çizerek belirlemektir. Gerçekten de ASCII art (metin sanatı) yapar gibi kod yazabilirsiniz:

.ana-kapsayici {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar icerik reklam"
    "footer footer footer";
  grid-template-columns: 200px 1fr 250px;
}

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