CSS Subgrid ile oluşturulan yeni yerleşim

• CSS Subgrid, mevcut Grid’in sınırlarını aşarak üst grid yapısını alt DOM öğelerine kadar genişletebilen bir özellik
• Daha önce gride yalnızca doğrudan çocuk öğeler katılabiliyordu; ancak subgrid kullanıldığında <ul>·<li> gibi iç içe yapılar da aynı grid hücresi düzenine yerleştirilebiliyor
• İçerik uzunluğu farklarından kaynaklanan kardeş öğeler arasındaki dengesizliği çözer ve her kart ya da bölümün dinamik olarak tepki veren yerleşimlerle kurulmasını destekler
• Ancak satır ayırma sorunu, çizgi numaralarının sıfırlanması, auto-fill tabanlı akışkan grid ile uyumsuzluk gibi dikkat edilmesi gereken noktalar vardır
• Başlıca tarayıcılarda desteklenir ve aşamalı benimseme mümkün olduğundan, gelecekte UI tasarım esnekliğini büyük ölçüde artırabilecek bir teknolojidir

---

Subgrid’in temel kavramı

• İlk CSS Grid, yerleşime yalnızca doğrudan çocuk öğelerin katılmasına izin veriyordu
  • Örneğin portföy arayüzünde, <ul> içindeki <li> görselleri varsayılan olarak tek bir hücre içinde gruplanır
• grid-template-rows: subgrid, grid-template-columns: subgrid kullanıldığında üst gridin satır ve sütun tanımları miras alınır
  • Böylece her <li>, üst gridin hücrelerine doğrudan yerleştirilir ve anlamsal HTML yapısı ile görsel hizalama aynı anda korunur
• Aynı sonuç Flexbox ve iç içe Grid ile de elde edilebilir; ancak subgrid, tek bir grid yapısının paylaşılmasıyla daha sade bir yaklaşım sunar

Yeni yerleşim olanakları

• Portföy kartı örneğinde her <article>, görsel ve metni yerleştiren 2 sütunlu bir gride sahiptir
  • fr birimi esnektir; ancak her kart hesaplamayı bağımsız yaptığı için sütun genişliği dengesizliği oluşur
• grid-template-columns: subgrid uygulandığında üst gridin sütun oranları tüm kartlar tarafından paylaşılır
  • Başlık uzunluğu gibi içerik değişimlerine göre tüm grid otomatik olarak yeniden ayarlanır
• Bu yöntemle kardeş öğeler arasında birbirini fark eden bir yerleşim kurulabilir
  • Örneğin “Infinite Supercomputer” başlığı kısaltıldığında, tüm kartlardaki görsel ve metin oranı anında ayarlanır

Subgrid kullanırken dikkat edilmesi gerekenler (Gotchas)

Satır alanı ayırma

• Sütun paylaşımı sezgiseldir; ancak satır paylaşımında açık satır ayırma gerekir
  • Örneğin fiyatlandırma kartlarında, her <ul> içindeki öğelerin aynı satırlarda hizalanması için grid-row: span N ile satır sayısını belirtmek gerekir
• Subgrid varsayılan olarak yalnızca tek bir hücreyi kaplar; bu yüzden birden fazla satır kullanmak için önce üst grid alanını genişletmek gerekir

İç içe grid numaralandırması

• Subgrid, üst öğenin satır ve sütun şablonlarını miras alır; ancak çizgi numaraları sıfırlanır
  • Örneğin üst öğeden 2–5 numaralı çizgiler miras alınsa bile içeride bunlar yeniden 1–4 olarak numaralandırılır
  • Her grid kendi dizinine sahip olduğundan, çizgi numaraları benzersiz kimlikler değil göreli dizinler olarak çalışır

Akışkan grid ile uyumsuzluk

• repeat(auto-fill, minmax()) biçimindeki fluid grid, subgrid ile birlikte kullanılamaz
  • Subgrid, önceden tanımlanmış bir sütun sayısı ister; auto-fill ve auto-fit desteklenmez
  • Yazar, bu kombinasyon için bir çözüm bulamadığını açıkça belirtiyor

Eski tarayıcı desteği

• 2023 sonrasından itibaren başlıca tarayıcılarda destekleniyor; ancak destek oranı %90’ın altında
• @supports not (grid-template-columns: subgrid) koşuluyla alternatif bir yerleşim sağlanabilir
  • Örneğin görsel ve metni dikey yığın düzeninde yerleştiren bir fallback yapısı öneriliyor

Gerçek örnekler ve sonuç

• Stripe geliştirici sitesi (stripe.dev), tüm sayfayı tek bir büyük grid olarak kuruyor ve birden fazla subgrid katmanı ile ayrıntılı yerleşim sağlıyor
• Subgrid yalnızca büyük ölçekli yerleşimlerde değil, küçük UI ayarlamalarında da kullanışlıdır
• Tüm projeyi yeniden yapılandırmadan aşamalı olarak devreye alınabilir
• CSS yerleşiminde yeni esneklik kazanmanın bir yolu olarak, deneysel kullanım açısından yüksek değere sahiptir

[GN⁺]

Hacker News görüşleri

• Subgrid özelliği gerçekten harika, ancak ilk basit örnekte çocuk öğelerin grid düzenine katılması için ul { display: contents } de kullanılabilir
  Subgrid özelliği gerçekten gerekmiyorsa bu yöntem daha verimli

  • O örnek için doğru, ama genel olarak display: contents UL öğesini yerleşimden tamamen kaldırır
    Bu yüzden o öğeye stil uygulayamaz veya UI olayları aldıramazsınız
    UL'yi vurgulama alanı ya da kaydırılabilir bir bölüm olarak kullanmak istiyorsanız subgrid çok daha kullanışlıdır
  • İkinci örnekte, görsellerin genişliğini sabit tutmak için fr yerine başka bir birim kullanıp, metin için kalan alanı dolduracak şekilde fr kullanabilirsiniz

• Eskiden bir fiyat karşılaştırma UI'ı yaparken subgrid olmadığı için gerçekten çok zorlanmıştım
  İki tabloyu yan yana koyup satırlarını hizalamak imkansızdı
  Sabit yükseklik ya da JS hesaplamalarıyla çözülebilirdi ama React bileşen yapısında bu fazla verimsizdi

• Container queries daha iyi bir çözüm olabilir diye düşünmüştüm
  Ama tüm gridin tutarlılığını korumak için subgrid daha uygun olabilir
  Bu arada, CodePen örneğine bakarsanız anlaması daha kolay

  • Container queries, kardeş öğelerin boyutuna tepki verme sorununu çözmez
    Ayrıca container kullanınca yeni bir stacking context oluşur, bu da kullanışsızdır
    Subgrid ile container'ı birlikte kullanamamak üzücü. Çocuk öğeler subgrid boyutunu referans alabilseydi gerçekten çok güçlü olurdu

• “Sonunda yine <table> düzenine mi geri döndük?” diye düşündürüyor

  • Hem evet hem hayır. Eski <table> yapıları sorun çözmek için kullanılan bir hack idi ama erişilebilirlik ve teknik açıdan birçok kısıtı vardı
    Grid sistemi görsel yerleşim için bir araçtır; veri yapısını ifade eden tablolarla aynı şey değildir
    Artık grid standart hale geldiğine göre, onu tablolarla kıyaslamayı bırakmamızı isterim
  • 25 yıl önce sunucuda tabloları otomatik render ederek yerleşim oluşturuyorduk ve o zaman bu gerçekten kolay çalışıyordu
    Ama responsive tasarım ya da erişilebilirlik hiç düşünülmüyordu. Sonuçta tabloları yeniden icat etmiş olduk
  • <table> ile ilgili sorun, onun içeriği açıklayan bir yapı olmasıydı. Grid'in kendisinde bir sorun yok
  • Ben de 20 yıldan uzun süredir “tablolar tablosal veri içindir” sözünü duyuyorum
    Sonuçta CSS bu işlevi geliştirilmiş bir biçimde yeniden uygulamış oldu

• Geçmişte karşılaştığım grid hatalarından biri, <img> öğesinin boyutunu yüzdeyle verdiğinizde hücre boyutunun orijinal görsel boyutuna göre bozulmasıydı
  Hem Firefox hem de Chromium'da oluyordu; ilgili hata kaydı Mozilla Bug 1857365 burada

  • Görsele sabit width/height öznitelikleri verirseniz bu sorunun ortadan kalkıp kalkmadığını merak ediyorum

• CSS'nin yerleşim için belge yapısına dair ek bilgi gerektirmesi zaman zaman can sıkıcı
  Örneğin satır sayısını açıkça belirtmek zorunda olmak gibi

  • İdeal olarak, ebeveynleri farklı olsa bile öğeleri hizalamanın bir yolu olmalı
    Ya da bir flex container başka bir container'ın dağılımını taklit edebilse güzel olurdu
    Ama bu yapılırsa DX'in karmaşıklaşma ihtimali yüksek

• Kod örneklerinde neden hem HTML hem CSS dosyasında stiller bulunduğunu merak ettim
  İlk subgrid örneğinin yalnızca CSS'ine bakınca UL'ye hangi stillerin uygulandığını bulmak uzun sürdü

• “Sonunda yine grid'e mi geri döndük?” diye düşündürüyor
  Eski HTML döneminde de benzer şeyler yapıyorduk

  • Ama bugünün grid'i responsive tasarımı çok daha kolay hale getiriyor
  • Elbette artık stil verirken daha fazla hata çıkması gibi bir yan etkisi de var 😅

• Josh'un blog yazıları her zaman hayranlık uyandırıyor
  Yazıların açıklığı, tasarım anlayışı ve interaktif web sitesi; hepsi çok başarılı

  • Ben de onun e-posta listesine aboneyim. Her yeni yazı geldiğinde heyecanla bekliyorum

• Kişisel olarak grid bana hâlâ kullanışsız geliyor
  Sözdizimi de tuhaf, yerleşim hissi de bana oturmuyor. Flexbox çok daha sezgisel ve esnek

  • İki teknoloji sorunlara farklı şekilde yaklaşıyor
    Flexbox içerik odaklıdır, Grid ise boyutları container odaklı kontrol eder
  • Ben de ara sıra grid'i yeniden deniyorum ama hâlâ istediğim bazı özellikler eksik geliyor
    İçerik birden fazla eksende otomatik hizalanmıyor ve her şeyi elle yerleştirmek gerekiyor
    Muhtemelen ya grid'in özünü tam anlamadım ya da yaptığım iş türüyle pek uyuşmuyor
  • Responsive tasarım yaparken de flexbox bana grid'den çok daha basit geliyor