CSS Subgrid: Layout''ta Yeni Dönem

Merhaba,

CSS Grid, web layoutlarını kökten değiştirdi. Ama bir sınırlılığı hep vardı: iç içe grid'ler birbirinden habersizdi. CSS Subgrid bu problemi çözüyor ve karmaşık layout senaryolarını çok daha temiz bir şekilde halletmemizi sağlıyor. Gelin inceleyelim arkadaşlar.

Subgrid Neden Gerekli?

Grid kullandığınızda child elementler parent'ın grid çizgilerine hizalanır. Ama o child'ların kendi child'ları (grandchild elementler) parent grid'den habersizdir. Mesela bir kart grid'inde kart içindeki başlık, açıklama ve butonun hepsini aynı yüksekliğe hizalamak için JavaScript tricks gerekirdi. Subgrid bunu CSS ile çözüyor.

Temel Kullanım

grid-template-rows: subgrid veya grid-template-columns: subgrid ile bir child element, parent'ın grid çizgilerini miras alıyor. Child artık parent grid'inin bir parçası gibi davranıyor. Tüm modern tarayıcılar Subgrid'i destekliyor Chrome 117, Firefox (uzun süredir), Safari 16'dan itibaren.

Kart Komponenti Örneği

Uygulamada en sık kullanım: eşit yükseklikte kart satırları. Farklı içerik uzunluğuna sahip kartların başlık, içerik ve footer satırlarının hizalanması. Subgrid olmadan ya sabit yükseklik ya JavaScript, ya da çirkin hacky CSS gerekiyordu. Subgrid ile parent'a grid-template-rows: subgrid tanımlamak yeterli kartlar birbirinin satırlarını görerek hizalanıyor.

Form Layout'larında Subgrid

Karmaşık form tasarımlarında etiket ve input hizalaması için güçlü. Farklı uzunluklardaki etiketler tam hizalamaya kavuşuyor. Önceden bu için tablolar veya karmaşık flexbox kullanılırdı.

Tarayıcı Desteği

2024 itibarıyla tüm modern tarayıcılarda Subgrid desteği mevcut. IE11 zaten tarihe karıştı. Kurumsal uygulamalar için güvenle kullanılabilir. Sadece çok eski tarayıcı desteği gereken sistemlerde dikkat.

Subgrid vs. Container Queries

İki özellik birbirini tamamlıyor. Container Queries responsive component davranışı için, Subgrid ise layout hizalaması için. İkisini birlikte kullanmak modern CSS'in gücünü tam ortaya çıkarıyor.

Sonuç

CSS Subgrid, JavaScript'e ya da hacky çözümlere başvurmadan karmaşık layout hizalaması yapabilmeyi sağlıyor. Kart grid'i kullanan her projede hemen değer katacak bir özellik :)

İyi Günler Dilerim,