CSS Grid ve Flexbox: Modern Web Sayfası Düzeninde Ustalaşın

LydexCoding · 8 Ağu 2025

Günümüzün web dünyasında estetik ve işlevsellik bir arada olmalı. Modern web sayfaları, farklı ekran boyutlarına uyum sağlayabilen, esnek ve hızlı yüklenebilen yapılar gerektirir. İşte bu noktada CSS Grid ve Flexbox devreye giriyor. Bu iki güçlü CSS modülü, karmaşık sayfa düzenlerini bile kolayca oluşturmanızı sağlar.

Flexbox (Esnek Kutu Modülü)
Flexbox, tek boyutlu düzenler için tasarlanmıştır. Yani, öğeleri bir satırda veya bir sütunda hizalamak ve dağıtmak için mükemmeldir. Menüler, gezinme çubukları veya bir dizi öğenin eşit aralıklarla yerleştirilmesi gibi görevlerde oldukça etkilidir.
Özellikleri:

Öğeleri ana eksen ve çapraz eksen boyunca hizalama
Öğelerin boyutunu ve sırasını dinamik olarak ayarlama
Boş alanın dağıtımını kolaylaştırma

Örnek kullanım:

Kod:

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

CSS Grid (Izgara Modülü)
CSS Grid ise iki boyutlu düzenler için tasarlanmıştır. Satır ve sütunları aynı anda yöneterek karmaşık sayfa düzenlerini (örneğin, dergi düzenleri veya karmaşık panolar) oluşturmak için idealdir. Tüm sayfanın ana düzenini oluşturmak için Grid, genellikle ilk tercih olmalıdır.

Özellikleri:

Satır ve sütunlar tanımlayabilme
Öğeleri belirli ızgara alanlarına yerleştirebilme
Dinamik ızgara şablonları oluşturma

Örnek kullanım:

Kod:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 100px;
  gap: 10px;
}

Ne Zaman Hangisini Kullanmalı?
Genel kural şöyledir:

Eğer öğeleri tek bir eksen (yatay veya dikey) boyunca düzenlemeniz gerekiyorsa, Flexbox kullanın.
Eğer öğeleri hem yatay hem de dikey olarak, yani iki boyutlu bir alanda düzenlemeniz gerekiyorsa, CSS Grid kullanın.

Çoğu modern web tasarımında, bu iki teknolojiyi birlikte kullanmak en iyi sonuçları verir. Grid genel sayfa düzenini oluştururken, Flexbox bu düzenin içindeki küçük bileşenlerin hizalanması için kullanılabilir.

Sonuç
CSS Grid ve Flexbox, responsive ve duyarlı web tasarımları oluşturmak için vazgeçilmez araçlardır. Bu iki güçlü araçla ustalaşarak, web geliştirme becerilerinizi bir üst seviyeye taşıyabilir ve kullanıcı deneyimini önemli ölçüde geliştirebilirsiniz.

Flexbox hakkında daha fazla bilgi
CSS Grid hakkında daha fazla bilgi