- Katılım
- 21 May 2023
- Mesajlar
- 539
- Tepki
- 17
- Puan
- 18
Bir sayfa düzenine flexbox ile başlayıp yarı yolda satırlar ve sütunlar birbirini kesmeye başladığında, negatif margin'ler ve iç içe konteynerlerle düzeni zorlamaya çalışmak yaygın bir eğilim; genelde bu noktada "bunu en baştan grid ile mi kurmalıydım" sorusu akla geliyor. İkisi de CSS'in resmî düzen modülleri ama farklı problemleri çözmek için tasarlandılar; karar aslında estetik tercih değil, düzeninizin kaç boyutlu olduğuna bağlı.
Bu yazı iki modülün W3C spesifikasyonlarındaki resmî tanımını karşılaştırıyor ve hangi soruyu sorarak aralarında seçim yapabileceğinizi gösteriyor.
Flexbox resmî olarak ne için tasarlandı?
W3C'nin CSS Flexible Box Layout spesifikasyonuna göre flexbox, "daha karmaşık uygulamaları ve web sayfalarını düzenlemek için tasarlanmış" yeni bir düzen modu tanımlıyor. Belgede tarif edilen temel davranış, öğelerin tek bir ana eksen boyunca (yatay ya da dikey) sıralanması, yeniden sıralanabilmesi ve o eksende esnek biçimde büyüyüp küçülebilmesi. Çapraz eksende hizalama da mümkün ama modülün asıl tasarım hedefi tek boyutlu bir dizilim.
Grid resmî olarak ne için tasarlandı?
W3C'nin CSS Grid Layout spesifikasyonu ise farklı bir hedef tanımlıyor: "Grid Layout, içeriğin her iki boyutta da hizalanmasının istendiği iki boyutlu düzenler için optimize edilmiştir." Yani grid, satır ve sütunları aynı anda kontrol etmenizi, öğeleri kaynak sırasından bağımsız olarak istediğiniz hücreye yerleştirmenizi ve öğelerin üst üste binmesini kasıtlı olarak yönetmenizi sağlıyor.
İki spesifikasyonu yan yana okuduğunuzda fark netleşiyor: flexbox içeriğin doğal boyutuna göre bir eksende akıyor, grid ise önceden tanımlanmış bir ızgaraya göre iki eksende yerleşiyor. Bu, flexbox'ta düzenin içerikten türediği, grid'te ise düzenin önceden tanımlanıp içeriğin ona yerleştirildiği anlamına geliyor; pratikte flexbox içerik-öncelikli, grid ise iskelet-öncelikli bir yaklaşım sunuyor.
Kararı belirleyen tek soru
Pratikte karar şu soruya indirgeniyor: "Bu bileşenin hizalanması gereken hem satırlar hem sütunlar var mı, yoksa tek bir sıra/sütun boyunca mı diziliyor?" Bir gezinme çubuğu, bir düğme grubu veya bir kart içindeki ikon-metin ikilisi genelde tek eksenli; bu durumda flexbox doğrudan yeterli oluyor. Bir ürün kartları ızgarası, bir dashboard paneli ya da sayfanın genel iskeleti (header-sidebar-content-footer) ise iki eksenli; burada grid'in hücre bazlı kontrolü işi kısaltıyor.
İkisi birbirinin yerine geçmiyor, birbirini tamamlıyor
Flexbox'ın hizalama özellikleri (justify-content, align-items gibi) grid'in de temelini oluşturuyor; bu iki modül aynı hizalama mantığını paylaşıyor, sadece eksen sayısı farklı. Google'ın web.dev eğitim sayfası da bu ortak kökeni doğruluyor: flexbox'la birlikte gelen hizalama özelliklerinin "kendi ayrı spesifikasyonuna taşındığını, bunları grid'de de karşılaşacağınızı" belirtiyor. Yani iki modülü ayrı öğrenmek gerekmiyor; hizalama söz dizimi bir kere öğrenildiğinde her ikisinde de geçerli kalıyor, değişen yalnızca eksen sayısı. Uygulamada en sık görülen yapı, dış iskeleti grid ile kurup, grid hücrelerinin içindeki öğe dizilimini flexbox ile yönetmek. Örneğin bir kart ızgarasını grid ile satır/sütun olarak yerleştirip, her kartın içindeki başlık-açıklama-buton sıralamasını flexbox ile hizalamak yaygın bir kalıp.
Bu ayrımı sayfa hızına da bağlamak isteyenler için LCP süresini düşürmeye odaklanan CSS ipuçları yazısı faydalı bir devam noktası; gereksiz iç içe geçmiş flexbox konteynerlerinin, doğrudan grid ile çözülebilecek bir düzeni gereksiz yere ağırlaştırabileceğini de kapsıyor.
grid-template-areas ile iskeleti isimlendirmek
Grid'in pratikte flexbox'a göre en somut avantajı, düzeni sayı yerine isimle tarif edebilmesi. W3C'nin spesifikasyonundaki örnek sözdizimi şöyle:
Örnek: grid-template-areas: "title stats" "score stats" "board board" "ctrls ctrls";
Burada tırnak içindeki her satır bir grid satırını, her kelime de bir sütunu temsil ediyor; aynı ismin yan yana ya da alt alta tekrarlanması, o grid öğesinin birden fazla hücreyi kapladığını gösteriyor. Öğeler daha sonra grid-area: title; gibi tek bir bildirimle bu isimlendirilmiş alana yerleştiriliyor. Flexbox'ta aynı düzeni kurmak için iç içe konteynerler ve sıralı order değerleriyle uğraşmak gerekirken, grid'de düzenin tamamı tek bir bildirimde okunabilir hâle geliyor; bu da altı ay sonra kodu tekrar açtığınızda düzeni CSS'ten değil HTML'den okumanızı sağlıyor.
Duyarlı (responsive) tasarımda fark nasıl ortaya çıkıyor?
Ekran genişliği daraldıkça bir düzenin satır/sütun sayısının değişmesi gerekiyorsa, bu genelde grid'in `grid-template-columns` ile medya sorgusu birleşiminin işi; `repeat()` ve `auto-fit` gibi işlevler sütun sayısını ekran genişliğine göre otomatik ayarlamayı da mümkün kılıyor. Öğelerin sırasını koruyup yalnızca sarma (wrap) davranışı yeterliyse flexbox'ın `flex-wrap` özelliği daha az kodla aynı sonucu veriyor. Bu konuyu daha geniş bir çerçevede, sayfa hızıyla birlikte görmek isterseniz bu konuyu ele alan yazıya bakabilirsiniz; düzen modülü seçimi de bu genel çerçevenin bir parçası.
Karar vermeden önce sorulacak üç soruyu şöyle sıralayabiliriz:
- Eksen sayısı: Öğeler tek bir sırada mı, hem satır hem sütunda mı diziliyor?
- Kaynak sırası: Görsel sırayı DOM sırasından bağımsız değiştirmeniz gerekiyor mu?
- İç içe kullanım: Dış iskelet grid, iç hizalama flexbox ile mi daha sade kuruluyor?
Kontrol noktası' Alıntı:
Web geliştirmenin temel kavramlarını baştan gözden geçirmek isteyenler için bu kapsamlı başlangıç rehberi düzen modülleri dışındaki temel yapı taşlarını da özetliyor.
Sık Sorulan Sorular
CSS Grid nedir?
Grid, sayfayı satır ve sütun olmak üzere iki eksende aynı anda düzenleyen bir yerleşim sistemidir. Kapsayıcı üzerinde bir ızgara tanımlanır, öğeler bu ızgaraya yerleştirilir.
Flexbox nedir?
Flexbox tek bir eksende dizilim yapar: öğeleri ya bir satır ya da bir sütun boyunca hizalar ve aradaki boşluğu dağıtır.
CSS Grid mi Flexbox mu kullanmalı?
Karar sorunun kaç eksenli olduğuna bakar: hem satır hem sütun hizası aynı anda gerekiyorsa Grid, tek bir eksende dizilim yetiyorsa Flexbox uygundur. İkisi birlikte de kullanılabilir.
Özetle
Flexbox tek boyutlu, grid iki boyutlu düzenler için W3C tarafından ayrı ayrı tanımlanmış modüller; ikisi rakip değil, çoğu gerçek arayüzde birlikte çalışıyor. Kararı "hangisi trend" sorusu değil, bileşenin kaç eksende hizalanması gerektiği belirliyor.
Son kurduğunuz düzende bu soruyu baştan mı sordunuz, yoksa yarı yolda mı fark ettiniz?
Güncelleme: 24 Ağustos 2026.
Dijital Dünyanıza Yön Veren Pusula
