Safari Technology Preview 234 ile tanıtılan CSS Grid Lanes, CSS Grid'e yepyeni bir yetenek kazandırarak "masonry" tarzı düzenleri mümkün kılıyor. Bu özellik sayesinde içerik, yalnızca sütunlar veya yalnızca satırlar halinde hizalanabiliyor, bu da farklı en boy oranlarına sahip öğelerin birbirine daha esnek bir şekilde yerleşmesini sağlıyor. Artık içeriği yapay olarak kırpmaya gerek kalmıyor ve HTML'de daha önce yer alan içerikler kapsayıcının başında gruplanırken, yeni yüklenen öğeler mevcut düzeni bozmadan sona ekleniyor.
Grid Lanes'in içerik akışını anlamak başlangıçta zorlayıcı olabilir; zira içerik, tanımlanan düzene dik yönde akıyor. Örneğin, sütunlar tanımlandığında içerik, sanki satırlar varmış gibi sütunlar arasında ileri geri hareket eder. Bu karmaşık akışı görselleştirmek için Safari'nin Grid Inspector'ına yeni bir özellik eklendi: "Sıra Numaraları". Bu yeni özellik, öğelerin ekrandaki sırasını açıkça göstererek geliştiricilerin içerik akışını daha kolay kavramasına olanak tanıyor.
İçerik sırası, özellikle erişilebilirlik açısından büyük önem taşıyor. Ekran okuyucularla veya klavye navigasyonuyla siteyi kullanan kişiler için mantıksal bir sıra hayati önem taşır. Grid Inspector'daki Sıra Numaraları, geliştiricilerin CSS'in sonucu nasıl etkilediğini anında görmesini sağlayarak "flow-tolerance" ayarlarını optimize etmelerine yardımcı oluyor. Bu özellik, Safari 16.0'dan bu yana Flexbox Inspector'da bulunan Flex öğelerinin sırasını işaretleme özelliğinin bir uzantısı olup, CSS Grid ve Subgrid için de geçerlidir.
Bu yeni geliştirici aracı, CSS Grid Lanes ile karmaşık düzenler oluştururken içerik akışını ve erişilebilirliği yönetmeyi önemli ölçüde kolaylaştırıyor.