CSS Subgrid Tüm Tarayıcılarda Desteklendi: Karmaşık Layout'lar Artık Daha Kolay

Merhaba,

CSS Grid'i kullananlar için uzun zamandır beklenen bir özellik nihayet evrensel tarayıcı desteğine kavuştu: CSS Subgrid. Bu yazımda Subgrid'in ne olduğunu, ne sorunu çözdüğünü ve nasıl kullanıldığını dilim döndüğünce aktarmaya çalışacağım.

Sorun Ne İdi ?

CSS Grid ile dış bir container üzerinde grid tanımlayabiliyorsunuz. Ama iç içe bir yapıda, çocuk elemanlar dış grid'in satır/sütun çizgilerine hizalanamıyordu. Her çocuk kendi iç grid'ini oluşturuyordu ve bunlar birbirleriyle bağımsızdı.

Pratik sonuç: Kart bileşenlerini içeren bir grid düşünün. Her kartta başlık, içerik ve buton var. Farklı uzunluktaki içerikler nedeniyle kartlar arasında butonlar hizasız duruyordu. Bunu çözmek için JavaScript veya sabit yükseklikler kullanmak gerekiyordu.

Subgrid Bunu Nasıl Çözüyor ?

Subgrid ile bir çocuk element, ebeveynin grid track'lerini devraliyor:

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

.kart {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid; /* Ebeveynin satırlarını devral */
}

.kart-baslik   { grid-row: 1; }
.kart-icerik   { grid-row: 2; }
.kart-buton    { grid-row: 3; }

Bu yapı sayesinde tüm kartlardaki başlıklar aynı hizada, içerikler aynı hizada, butonlar aynı hizada duruyor. JavaScript yok, sabit yükseklik yok, karmaşık hesaplama yok.

Tarayıcı Desteği

2023 sonunda artık tüm modern tarayıcılarda Subgrid destekleniyor:

• Chrome 117+
• Firefox 71+
• Safari 16+
• Edge 117+

Küresel kullanım oranı %90'ın üzerinde. Production'da güvenle kullanabilirsiniz.

Ne Zaman Subgrid Kullanmalısınız ?

• Kart grid'lerinde içerik hizalaması
• Form label ve input hizalaması
• Dashboard widget'larında iç yapı tutarlılığı
• Tasarım sistemlerinde bileşen içi grid uyumu

Her grid senaryosunda Subgrid gerekmez. Ama iç içe yapılarda hizalama sorununuz varsa artık JavaScript'e gerek yok. CSS bunu çözüyor.

İlerleyen CSS yazılarımda Container Queries ile Subgrid'i birlikte kullanmayı da ele alacağım.

İyi Günler Dilerim,