Bugün sizlere flexbox ve grid arasındaki temel farkı ve ne işe yaradığını anlatmaya çalışacağım.
Öncelikle üstte gördüğünüz üzere flexbox tüm alt öğelerini aynı düzeye getirirken grid her alt öğeyi farklı düzeye getirebiliyor.
Flexbox: Esnek satırlar ve sütunlar
Flexbox bir satır ya da sütun boyunca elemanları düzenlemek için harika bir araç. Diyelim ki yan yana duran birkaç kutunuz var ve bu kutuları ekran boyutuna göre esnek bir şekilde yerleştirmek istiyorsunuz. İşte tam burada flexbox devreye giriyor.Flexbox ile bir container'ın (mesela bir div) içindeki elemanları esnek bir şekilde hizalayabiliyorsunuz. En basit haliyle elemanları yatayda (row) ya da dikeyde (column) düzenleyebiliyorsunuz. Elemanlar arası boşlukları, sıralarını, hizalamalarını tek tek ayarlamak çok kolay oluyor.
Örnek:
CSS:
.container {
display: flex;
justify-content: space-between;
}Burada container içindeki elemanlar yatay olarak yan yana sıralanır ve aralarındaki boşluklar eşitlenir. Flexbox özellikle tek boyutlu düzenlemeler için kullanışlı. Yani ya yatay ya da dikey eksende düzenleme yapıyorsanız, flexbox sizin işinizi görür.
Detay için bakabilirsiniz: W3Schools.com
Grid: karmaşık düzenlemeler için ideal
Grid ise daha karmaşık düzenler için biçilmiş kaftan. Diyelim ki bir sayfada hem satır hem de sütunlar boyunca elemanları yerleştirmek istiyorsunuz, işte grid bu işi mükemmel yapar.
Grid ile bir konteyneri hem yatay hem de dikey eksende bölebilirsiniz. Böylece satırlar ve sütunlar oluşturur, her bir hücreye istediğiniz gibi eleman yerleştirebilirsiniz.
CSS:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 200px;
}Burada, container içinde üç sütun ve iki satır var. İlk sütun 1fr (yani birim alan), ikinci sütun 2fr (diğer iki sütunun toplamı kadar geniş), ve üçüncü sütun tekrar 1fr genişliğinde. Satırların yüksekliği ise birincisi içeriğine göre otomatik ayarlanıyor, ikincisi ise sabit 200px.
Grid, özellikle iki boyutlu düzenlemeler için ideal. Yani hem yatay hem de dikey eksende aynı anda düzenleme yapmanız gerektiğinde grid’i kullanmak çok daha mantıklı olur.
Detay için bakabilirsiniz: W3Schools.com
Ne zaman hangisini kullanmalısınız?
Eğer tek bir sıra ya da sütun içindeki elemanları düzenlemeniz gerekiyorsa, flexbox işinizi kolayca görecektir. Ama sayfanızda daha karmaşık, hem yatay hem dikey eksenlerde düzenlemeler yapmanız gerekiyorsa, grid sizin için daha uygun bir çözüm olur.Özetle:
- Flexbox: Tek boyutlu düzenlemeler için.
- Grid: Çok boyutlu daha karmaşık düzenlemeler için.
Okduğunuz için teşekkürler.
