CSS Grid ve Flexbox Pratik Uygulamalar

Duyarlı tasarım artık ek bir özellik değil, temel beklenti. İyi haber şu: modern CSS ile bunu medya sorgularına boğulmadan yapabilirsin. Grid ve Flexbox birlikte kullanıldığında, tarayıcıya "şu alan bu kadar yer istiyor" demen yeterli oluyor. Gerisini tarayıcı hesaplıyor.

Aşağıdaki adımları boş bir HTML dosyasında dene. Tek bir div, birkaç kart, bir de kenar çubuğu yeter. Her satırı yazdıktan sonra pencereyi daralt, ne olduğunu gör. Bu iş okumakla değil, sürükleyerek öğreniliyor.

Grid ile Sayfa İskeletini Kurmak

Grid iki boyutlu düşünür: satır ve sütun. Sayfanın ana yerleşimi için ideal. Header, sidebar, içerik, footer gibi büyük blokları Grid'e ver.

auto-fit ve minmax ikilisi

Bir css responsive layout kurmanın en hızlı yolu şu tek satır:

• display: grid;
• gap: 1.5rem;
• grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

Ne yapar? Kutuların en az 260 piksel olmasını garantiler. Sığdıkça yeni sütun açar, sığmayınca alta atar. Medya sorgusu yazmadın, kırılma noktası tanımlamadın.

İki varyant arasındaki fark önemli:

Kart galerisi yapıyorsan auto-fit. Hizalamanın bozulmasını istemiyorsan auto-fill.

Named areas ile okunabilir yerleşim

Karmaşık sayfalarda sütun numarası saymak yorucu. Alanlara isim ver:

• Kapsayıcıda grid-template-areas ile satır satır şema çiz: "header header" / "sidebar main" / "footer footer"
• Her çocuğa grid-area: sidebar; gibi tek satır yaz
• Mobilde tek sütuna geçmek için sadece şemayı yeniden yaz: "header" / "main" / "sidebar" / "footer"

HTML'e dokunmadan sıralamayı değiştirdin. Bu, kaynak sırasını erişilebilirlik için mantıklı tutmanı sağlar.

Kırılma noktasını içeriğe göre seç

768px gibi cihaz efsanelerine bağlanma. Pencereyi daralt, tasarım nerede çirkinleşiyorsa oraya bir @media (min-width: ...) koy. Mobile-first çalış: temel stiller tek sütun olsun, geniş ekran için ekleme yap. Böylece küçük ekranda tarayıcı daha az kural işler.

Flexbox ile Bileşen İçini Düzenlemek

Grid iskelet, Flexbox ise kas. Tek bir eksende sıralanan şeyler için Flexbox daha rahat: navigasyon, buton grupları, kart içi başlık-metin-etiket dizilimi.

Sarmalanan navigasyon

Menüyü hamburger'a çevirmeden önce şunu dene:

1. display: flex; ve flex-wrap: wrap;
2. gap: 1rem; — margin hesabı yapmaktan kurtarır
3. justify-content: space-between; logo solda, linkler sağda

Yer kalmadığında linkler alt satıra iner. Çoğu blog ve dokümantasyon sitesi için bu yeterli.

flex: 1 1 0 mantığını çözmek

Kısaltmayı sırayla oku: grow, shrink, basis.

• flex: 1; → boş alanı paylaş, taşarsa küçül, temel genişlik 0
• flex: 0 0 240px; → sabit kenar çubuğu, esneme yok
• flex: 1 1 320px; → 320px hedefle, gerekirse büyü veya küçül

Kartlar yan yana eşit görünmüyorsa sebebi genelde flex-basis: auto. İçerik uzunluğu genişliği belirlemeye başlar. flex: 1 1 0; yaz, eşitlenir.

Kartları dipten hizalamak

Kart alt kısmındaki butonun hep aynı hizada durmasını istiyorsan:

• Kartı display: flex; flex-direction: column; yap
• Butona margin-top: auto; ver

Sabit yükseklik vermeye gerek yok. Bu numara, farklı uzunlukta metinlerde tasarımı kurtarır.

Taşmaları önleyen küçük ayarlar

• Uzun kelimeler kutuyu patlatıyorsa: min-width: 0; ve overflow-wrap: anywhere;
• Görseller için: max-width: 100%; height: auto; ve mümkünse aspect-ratio
• Yatay kaydırma çubuğu için şüpheli listesi: sabit genişlikler, negatif margin, 100vw kullanımı

Hangisini Ne Zaman?

Container query, bir bileşenin ekran değil kapsayıcı genişliğine göre değişmesini sağlar. Kapsayıcıya container-type: inline-size; ver, sonra @container (min-width: 480px) yaz. Aynı kart bileşenini hem geniş içerik alanında hem dar kenar çubuğunda kullanabilirsin.

Önce içeriği yaz, sonra düzeni kur.

© 2026 Yazılım Atölyesi