CSS Grid Lanes

 (webkit.org)
6 puan yazan GN⁺ 2025-12-20 | 2 yorum | WhatsApp'ta paylaş
  • Web’de masonry düzenini uygulamak için yeni bir CSS özelliği olan Grid Lanes, Safari Technology Preview 234’e eklendi
  • display: grid-lanes özelliği kullanılarak media query olmadan duyarlı grid oluşturulabiliyor ve grid-template-columns ile esnek sütun tanımları yapılabiliyor
  • item-tolerance özelliği ile öğe yerleşiminin hassasiyeti ayarlanabiliyor, içerik boyutu farklarından kaynaklanan görsel dengesizlik azaltılabiliyor
  • Hem sütun hem satır yönü destekleniyor; akış, grid-template-columns veya grid-template-rows tanımına göre otomatik belirleniyor
  • CSS Working Group bazı ayrıntılı özellik adlarını tartışıyor ve WebKit ekibi standardizasyon ile implementasyonu eşzamanlı yürütüp geliştiricileri denemeye teşvik ediyor

CSS Grid Lanes genel bakış

  • Grid Lanes, Web’de masonry tarzı düzeni yerel CSS ile uygulamak için yeni bir görüntüleme modu
    • display: grid-lanes kullanılarak mevcut gride benzer söz dizimiyle yapılandırılabiliyor
    • grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) ile minimum 250px genişliğinde esnek sütunlar oluşturulabiliyor
  • gap özelliğiyle öğeler arası boşluk belirleniyor ve media query kullanmadan tüm ekran boyutlarına uyum sağlanıyor
  • Safari Technology Preview 234’te denenebiliyor, WebKit bir demo sayfası sunuyor

Grid Lanes nasıl çalışıyor

  • Tarayıcı her öğeyi en üstteki konuma en yakın sütuna otomatik olarak yerleştiriyor
    • Masonry.js’ye benzer şekilde, sonraki öğe o anda en kısa olan sütuna ekleniyor
    • Kullanıcı, sekme ile gezinirken o anda görünen içeriği yatay yönde keşfedebiliyor
  • Sonsuz kaydırmalı içerik yükleme durumlarında JavaScript olmadan da otomatik sıralama yapılabiliyor

CSS Grid’in genişletilmiş özellikleri

  • lane boyutlarını çeşitlendirme: grid-template-* söz dizimiyle dar ve geniş sütunlar dönüşümlü yerleştirilebiliyor
    • Örnek: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
  • Öğe genişletme (span) desteği
    • Belirli bir öğe birden fazla sütuna yayılabiliyor (grid-column: span 4 gibi)
    • Örnek demo: gazete makalesi tarzı düzen
  • Açık yerleşim mümkün
    • Örn: header { grid-column: -3 / -1; } ile başlık son sütunlara sabitlenebiliyor

Yön değiştirme özelliği

  • Sütun tabanlı (waterfall) veya satır tabanlı (brick) düzenlerin ikisi de destekleniyor
    • grid-template-columns tanımlanırsa sütun yönü, grid-template-rows tanımlanırsa satır yönü otomatik seçiliyor
  • Varsayılan değer grid-auto-flow: normal; sistem tanımlanan yöne göre otomatik karar veriyor
  • CSS Working Group, akış kontrolü için kullanılacak özelliklerin adlarını (grid-lanes-direction vb.) tartışıyor
    • İlgili tartışmalar GitHub CSSWG-drafts issue’larında sürüyor

Yerleşim hassasiyetini ayarlama: item-tolerance

  • item-tolerance, öğeleri yerleştirirken boyut farklarının ne kadar katı ayırt edileceğini belirliyor
    • Varsayılan değer 1em; bunun altındaki farklar aynı yükseklikmiş gibi değerlendiriliyor
    • Değer yükseldikçe öğeler sağa sola daha az kayıyor, düştükçe daha ince konum ayarı yapılıyor
  • Erişilebilirlik açısından, sekmeyle gezinirken görsel sıçramayı en aza indirmek için uygun bir değer belirlemek gerekiyor
  • Özellik adı şu anda item-tolerance olarak tanımlı, ancak flow-tolerance veya pack-tolerance olarak değişebilir

Deneyler ve kullanım örnekleri

  • Safari Technology Preview 234’te çeşitli demolar sunuluyor
    • Fotoğraf galerisi, gazete tarzı makaleler, müze sitesi, mega menü düzeni vb.
  • Örnek kod: 
    .container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
  column-gap: 4lh;
}
  • Sadece görseller için değil, çok sayıda bağlantı içeren footer veya menü düzenleri için de kullanışlı

Gelecek planları

  • CSS Working Group, kalan özellik adlarını belirleme çalışmalarını sürdürüyor
  • WebKit ekibi 2022 ortalarından beri implementasyon ve standardizasyon çalışmalarını birlikte yürütüyor
  • Geliştiricilere demo hazırlama ve geri bildirim verme çağrısı yapılıyor
    • Jen Simmons, Bluesky ve Mastodon üzerinden görüş topluyor
  • Temel söz dizimi istikrar kazandığı için gerçek projelerde kullanıma hazırlık tamamlanmış durumda

İlgili okumalar

2 yorum

 
shakespeares 2025-12-21

O zaman Safari için Grid-lanes, Firefox için de ayrı grid kullanmak gerekecek, değil mi? Biraz web standartlarına göre uyum sağlasanız keşke...
 
GN⁺ 2025-12-20
Hacker News görüşleri

  • Safari ekibini alkışlıyorum. Ekim ayında birdenbire Interop 2025 sıralamasında zirveye çıkmaları gerçekten şaşırtıcıydı

    • iOS 26'dan sonra Safari'nin muazzam bir web özelliği güncellemesi aldığını hissedebildim. Yalnızca WebGPU değil, OPFS API'nin eksik kısımları da tamamlandı; artık gerçek kullanım için uygun. Üstelik field-sizing CSS özelliği de eklendi; böylece metin giriş alanının girilen içeriğe göre otomatik büyümesiyle ilgili sorun çözülmüş oldu
    • Safari, her büyük sürümde “en iyi tarayıcı” diye övülüyor ama diğer zamanlarda çok eleştiriliyor. Bence bunun nedeni, diğer tarayıcılar sürekli güncelleme alırken Safari'nin geleneksel sürüm döngüsünü izlemesi
    • Aslında şaşılacak bir şey yok. Birkaç yıldır Safari ekibinin modern HTML ve CSS özelliklerini istikrarlı biçimde sunduğunu görüyorum
    • Chrome ekibi WebPCIe gibi deneysel özelliklerin tanıtımını yaparken, Safari kullanıcıların gerçekten istediği özellikleri sunuyordu. Örneğin bulanık arka plan efektleri gibi şeyleri çok daha önce destekliyordu
    • Yine de Safari'nin hâlâ 64 bit wasm desteklememesi üzücü. WebAssembly özellik listesinde “%100 destek” yazıyor ama gerçekte önemli bir parça eksik

  • CSS Gap Decorations özelliğinin bir an önce gelmesini istiyorum. flex ya da grid öğeleri arasına güzel ayırıcı çizgiler koymak için sürekli gereksiz hack'ler kullanmaktan bıktım

    • Belki tablo kullanmayı deneyebilirsiniz. Eskisine göre zaten çok daha iyi ama biz hep daha fazlasını istiyoruz. İnsan galiba asla tatmin olmuyor

  • Son projede Masonry düzeni kullandım; performans fena değil ama absolute positioning temelli olduğu için oldukça hacky. Nesnelerin en-boy oranını önceden bilmeniz gerekiyor ve yeniden boyutlandırmada tekrar hesaplama yapmak gerekiyor. Bu yüzden yerel desteğin bir an önce gelmesini umuyorum

    • Ben de aynı hissi paylaşıyorum. CSS'nin bu sorunu çözmesini beklerken, 2019'dan beri ana sayfamdan son 1.3KB JavaScript'i kaldıracağım günü bekliyorum. Bu özelliği yapan herkese teşekkürler

  • Bu tür duyurular harika ama biraz da trajik komedi gibi. Apple tarayıcıyı sürekli güncellemediği için, yeni özelliklere gerçekten güvenip kullanabileceğiniz zaman çok daha sonra geliyor

  • Masonry düzeni güzel görünüyor ama tüm görselleri bir bakışta kavramayı zorlaştırdığını düşünüyorum

    • Web “tasarımının” büyük bir kısmı kullanılabilirlikten çok görünüme odaklanıyor. Gerçekte ürünü kullanan neredeyse yok; sadece kaydırma animasyonuna bakıp “güzelmiş” deniyor
    • Görsellerin hepsi yatay ya da hepsi dikey olduğunda sorun yok ama karışık olunca düzen darmadağın oluyor

  • Adına neden Masonry demediklerini merak ediyorum. Yine de grid-lanes adı açıklayıcı olduğu için anlaması kolay

  • LLM'lerin bu yeni CSS söz dizimini doğru şekilde öğrenmesinin ne kadar süreceğini merak ediyorum

  • Rastgele boyut ve konumdaki metinlerden oluşan bir grid içeren web sayfasına bakmak zorunda kalacaksam, biri beni vursa daha iyi
    Gazete tarzı grid demo görseli

    • Hiç gazete okumadın mı?
    • Bence bu tür bir tasarım güzel. Gazete gibi asimetrik ama verimli bir düzeni web'de kurabiliyorsun
    • Ama bunun, tasarımın temel ilkeleri olan hizalama ve gruplayı ihlal ettiğini düşünüyorum
    • Komik olan şu ki, bence gerçekten harika görünüyor
    • Aklıma doğrudan NYTimes.com geliyor

  • Ben kişisel olarak lane düzenini sevmiyorum. Listedeki tüm öğeleri sırayla gözden geçirmek zorlaşıyor, bakışlar yukarı aşağı sıçrıyor ve bu da bilişsel yorgunluğu artırıyor

    • Ama tüm öğeleri sistemli biçimde incelemeniz gerekmiyorsa lane düzeni de işe yarar. Pinterest gibi içeriği tek bakışta tüketilen siteler için uygun
    • Görünüş olarak güzel ama derinlemesine kullanımda rahatsız edici bir düzen
    • Amaç verimlilik değil; amacı, tıpkı gazete ya da fotoğraf galerisi gibi, her şeyi tek bakışta göstermek
    • Modası geçmeye başlarken özelliğin gelmesi ironik. UX açısından pek iyi değil ama görsel olarak hoş
    • Sağ beyin tipi bir tasarım hissi veriyor. Pinterest ya da Home Assistant gibi sitelere uyuyor

  • Apple'ın Safari'yi tüm platformlarda istikrarlı biçimde indirilebilir hâle getirmesi gerektiğini düşünüyorum

    • Bir zamanlar Windows XP'ye Safari kurduğumu hatırlıyorum. O başarısız denemeden sonra belli ki hâlâ yeterince zaman geçmemiş
    • Ama dolaylı olarak mümkün olabilir. Kagi'nin yeni tarayıcısı WebKit kullanıyor; şu an yalnızca macOS'ta var ama Windows sürümü de eventually gelecek deniyor