CSS Grid Level 3 için, namıdiğer "Masonry" düzenlerini oluşturma konusunda yardım çağrısı

• CSS Grid'in Masonry düzenini (tuğla dizilimi veya şelale düzeni olarak da bilinir) CSS Grid Level 3'e eklemeye yönelik bir öneri üzerinde çalışılıyor

  • Masonry düzeni, içeriği tuğla ya da taş duvar gibi sıkı biçimde dolduran bir desen olup, farklı boyutlardaki içerikleri kırpmadan veya atlamadan yerleştirebilir ve içeriği sütunlar boyunca akıtır
  • Bu, JavaScript olmadan yalnızca CSS ile uygulanması zor olan bir düzen türüydü

• CSS'te Masonry mekanizmasını uygulamak için 4 demo hazırlanmış

  • Klasik Masonry/şelale düzeni oluşturmak
  • Grid'in çeşitli sütun tanımlama özelliklerinden yararlanmak
  • Grid'in sütun birleştirme özelliğinden yararlanmak
  • Subgrid ve açık yerleşim kullanmak

• Grid'in çeşitli özellikleri ile Masonry'yi birleştirmek, çok daha yaratıcı ve dinamik düzenlerin uygulanmasını mümkün kılıyor

  • fr birimi, max-content, min-content, minmax() işlevi gibi araçlarla esnek ve çeşitli sütun boyutları tanımlama
  • Sütun birleştirme ile belirli öğeleri vurgulama veya daha renkli grid yapıları kurma
  • Subgrid ile iç içe grid'lerin track'lerini üst kapsayıcıya uyarlama
  • Açık yerleşim ile başlık gibi belirli öğelerin konumunu belirleme

• Masonry düzeninin ayrı bir display türü olarak ayrılması gerektiğini savunanlar da var

  • CSS Grid ile Masonry'nin birleştirilmesinin karmaşıklığı artırabileceği ve performansı olumsuz etkileyebileceği yönünde kaygılar var
  • Masonry'yi Grid'den ayırmak, her iki özelliğin de bağımsız biçimde gelişmesini sağlayabilir
  • Ancak Masonry'nin yalnızca sınırlı, eşit boyutlu sütun düzeni olarak uygulanmasını öneren görüşler de bulunuyor

• Masonry özelliğini CSS Grid'e dahil etmenin daha fazla avantaj sunduğu düşünülüyor

  • CSS Grid Level 3 spesifikasyonu zaten yazılmış durumda ve 2 tarayıcı motorunda uygulanmış
  • İleride Grid ve Masonry'ye aynı yeni özellikler sunulabilir (ör. track styling)
  • Masonry de Grid'in bir türü olduğu için kavramsal olarak da iyi uyuyor

• Web tasarımcıları ve geliştiricilerin görüşleri isteniyor

  • Masonry, CSS Grid'in bir parçası mı olmalı?
  • Çeşitli sütun boyutu tanımları, sütun birleştirme, yerleşim, Subgrid gibi Grid'in tüm özelliklerinden yararlanabilmeyi mi istersiniz? Yoksa yalnızca eşit boyutlu sütunların desteklenmesi daha mı iyi?
  • Bu özelliği nasıl kullanırdınız? Ne tür düzenler oluşturulabilir?
  • Kendi yaptığınız bir demo varsa paylaşmanız isteniyor
  • Bu modelle uygulanması zor olan düzenler var mı?

• Masonry adı uygun olmayabilir. Satırları kaldırma anlamında grid-template-rows: off gibi bir söz dizimi düşünmeye değer. İleride adın değişebileceğini akılda tutmak gerekiyor

GN⁺ görüşü

• CSS Grid'e Masonry özelliği eklenmesi, web düzenlerinin ifade gücünü ciddi biçimde artırabilecek anlamlı bir değişiklik gibi görünüyor. Özellikle yalnızca sütun yönünde yerleşen kolon tipi grid'lerin kolayca uygulanabilir hale gelmesi cazip
• Buna karşılık, Masonry'nin ayrı bir display türü olarak ayrılıp işlevinin sınırlandırılması gerektiği görüşüne katılmak zor. Aksine, Grid'in güçlü özellikleriyle birleştiğinde Masonry düzenlerinin kullanım alanı daha da genişleyebilir gibi görünüyor
• Ancak Masonry adı sezgisel değil ve kafa karışıklığı yaratabilir; bu yüzden yalnızca sütun odaklı bir grid'i ifade eden başka bir ad düşünmek faydalı olabilir. grid-template-rows: none gibi, "satırsız grid" anlamını daha açık veren bir söz dizimi daha iyi olabilir
• Bu önerinin CSS Grid'i daha da güçlü bir araç haline getirebileceği düşünülüyor. Farklı düzen örneklerini deneyip görüşleri aktif biçimde paylaşmak önemli görünüyor

[GN⁺]

Hacker News görüşü

Özet:

• CSSWG ve tarayıcı üreticilerinin DevRel ekipleri, 2020'den beri Masonry düzeninin CSS'e resmî olarak nasıl dahil edileceğini tartışıyor
  • WebKit ekibi bu tartışmayı herkese açık hâle getirip tasarımcılar ve geliştiricilerden görüş istemeye karar verdi
  • Bu önemli bir emsal olacak; çünkü mesele, tüm düzen seçeneklerinin CSS Grid'in bir parçası mı sayılacağı yoksa ihtiyaç oldukça yeni CSS Display özellikleri eklenmeye devam mı edileceği üzerine temel bir tartışma
• Masonry düzenini tuğla örmeye benzetmek eğlenceli, ancak gerçek tuğlaları öyle dizmek yapısal mühendislik açısından felaket olurdu
• Megamenu demosu, Masonry düzeninin uygunsuz kullanımına bir örnek; okuma akışını mahvediyor ve beklentileri ciddi biçimde boşa çıkarıyor
  • Görme engelli kullanıcılar her zaman "yanlış" sırada okuyacak
  • Bu, break-inside: avoid kullanılarak sütunlarla uygulanmalıydı
• Gazete demosu da benzer nedenlerle biraz şüpheli
• Bağımsız bloklardaki görseller veya medya için Masonry düzeni daha iyi çalışıyor
• Bu demolar Grid düzenini temel aldığı için, desteklemeyen tarayıcılarda bile makul bir sabit satır biçiminde görünüyor
• Masonry/Waterfall düzeninin genel hissi hoşuma gidiyor
  • Ancak varsayılan Masonry hizalaması yerine, soldan sağa okuma akışını daha çok koruyan bir düzen olsa iyi olurdu
• CSS'nin yerine geçebilecek bir düzen sistemi nasıl tasarlanır sorusu üzerinde düşünülüyor
  • Qt, Tk, SwiftUI gibi gerçekten uygulanmış sistemlerde daha iyi yönler olup olmadığı merak ediliyor
  • Geliştiricilere daha iyi bir arayüz sunmak için ne yapılmalı?
• Kendi fotoğraf sitesinde JS olmadan Masonry etkisini uyguladığı bir örnek paylaşılıyor
  • display:inline-block kullanarak fotoğrafları metin gibi ele alıp yeni satıra yeniden akıtıyor
  • Sonuç, Masonry kütüphanelerinden daha tatmin edici
• Zaten Flexbox ve Grid varken, CSS'e daha fazla "düzen" seçeneği eklemenin doğru olup olmadığı sorgulanıyor
  • Tüm düzen senaryolarını kapsayan, karmaşık olsa da nihai bir kısıt tabanlı sistem oluşturmak daha iyi bir çözüm olabilir
• WebKit ekibinin yeniden açık biçimde harika işler yaptığını görmek sevindirici