CSS Flexbox ve Grid ile Modern Sayfa Düzeni
Flexbox ve CSS Grid, web sayfalarında düzen oluşturmanın modern ve güçlü yöntemleridir. Float ve tablo tabanlı eski yaklaşımların yerini almıştır.
Flexbox Nedir?
Flexbox, tek boyutlu (yatay veya dikey) düzen için kullanılır. display: flex tanımlandığında alt öğeler esnek biçimde yerleşir. justify-content (yatay hizalama), align-items (dikey hizalama) ve flex-wrap (kaydırma) temel özellikleridir.
Flexbox Örneği
.kart-listesi { display: flex; gap: 16px; flex-wrap: wrap; } — Kartlar yan yana dizilir, sığmazsa alt satıra geçer. justify-content: space-between ile aralarında eşit boşluk bırakılır.
CSS Grid Nedir?
Grid, iki boyutlu (satır ve sütun) düzen için kullanılır. display: grid; grid-template-columns: repeat(3, 1fr); ile 3 eşit sütun oluşturulur. gap özelliği sütun ve satır aralıklarını ayarlar.
Grid Alan Tanımlama
grid-template-areas ile bölgeler isimlendirilerek yerleşim planı oluşturulur:"header header header""sidebar main main""footer footer footer"
Flexbox vs Grid
Flexbox: Menü, kart satırı, buton grubu gibi tek eksenli düzenler. Grid: Sayfa iskelet düzeni, galeri, dashboard gibi iki boyutlu yapılar için idealdir.
Bilkey Web Tasarım Kursu
CSS Flexbox ve Grid Bilkey Bilişim Akademisi'nde web tasarım eğitiminin CSS modülünde uygulamalı öğretilmektedir. Kurtköy Pendik'te birebir özel ders alabilirsiniz.
