CSS Mastery

CSS Düzeni:
Grid vs Flexbox

01. Mental Model Farkı

En büyük yanılgı "Grid, Flexbox'ın yenisidir" düşüncesidir. İkisi rakip değil, takım arkadaşıdır.

Flexbox (1D)

"Content-Out" yaklaşımıdır. İçerik, kapsayıcıyı şekillendirir.

Tek bir eksende (satır VEYA sütun) hizalama yapmak için mükemmeldir.

Navbar, Menü, Form elemanları, Card içi hizalama

CSS Grid (2D)

"Layout-In" yaklaşımıdır. Kapsayıcı, içeriği şekillendirir.

İki eksende (satır VE sütun) aynı anda kontrol sağlar.

Sayfa İskeleti, Dashboard, Resim Galerisi

02. Ne Zaman Hangisi?

        /* NAVIGASYON: Flexbox */
/* Elemanlar yan yana gelsin, boşluklar eşit dağılsın */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* SAYFA DÜZENİ: Grid */
/* Sol menü 250px, içerik kalanı kaplasın */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

/* KART LİSTESİ: Grid (Modern Yöntem) */
/* Media query yazmadan responsive grid! */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

Altın Kural: Eğer elemanlarınızın genişliğini içeriği belirliyorsa (örn: butonlar yan yana) -> Flexbox. Eğer elemanlarınızın genişliğini tasarım ızgarası belirliyorsa (örn: 3 kolonlu kart yapısı) -> Grid.