Yayınlanma tarihi: 23 Temmuz 2025
Microsoft Edge ve Google Chrome ekipleri, CSS masonry'nin Chrome ve Edge 140'tan itibaren erken geliştirici testine hazır olduğunu duyurmaktan heyecan duyuyor.
CSS duvar örgü spesifikasyonu ve söz dizimiyle ilgili açık sorunlar devam ederken API'nin son şeklini belirlememize yardımcı olmak için geri bildiriminiz çok önemli. Özelliği deneyip görüşlerinizi bizimle paylaşın.
CSS Masonry'yi bugün Chromium'da test edin
CSS Masonry'yi bugün test etmek için:
- Chrome veya Edge 140 ya da sonraki sürümlerini (veya eşleşen bir sürüme sahip başka bir Chromium tabanlı tarayıcı) kullanın.
- Yeni bir sekmede
about:flagsadresine gidin. - "CSS Masonry Layout" (CSS Duvar Örgüsü Düzeni) araması yapın.
- İşareti etkinleştirin.
- Tarayıcıyı yeniden başlatın.
Bu özellik etkinleştirildiğinde Microsoft Edge demolarına göz atarak (demo kaynak kodunu görüntüleyin) nasıl çalıştığını görebilir veya özellik ve kullanılabilir söz dizimi hakkında daha fazla bilgi edinmek için okumaya devam edebilirsiniz.
Masonry nedir?
CSS masonry, CSS grid, flexbox veya çok sütunlu düzen ile kolayca elde edilemeyecek şekilde öğelerden oluşan tuğla benzeri bir düzen oluşturmanıza olanak tanıyan bir düzen modudur.
CSS masonry, öğeleri sütun veya satır biçiminde düzenlemek için kullanılabilir. Öğeler, bu sütun veya satırlara daraltılmış şekilde yerleştirilir.
Duvar örgüsünü, tek kısıtlamanın farklı sürüş şeritlerinin sayısı ve boyutu olduğu bir otoyol olarak düşünebilirsiniz. Araçlar, şeritler içinde istedikleri uzunlukta olabilir ve her zaman hedeflerine (duvar düzeninin başlangıcı) olabildiğince yakın olmaya çalışır.
Düzen öğeleriniz yalnızca tek bir yönde sınırlandırılır ve yakındaki diğer öğelerden bağımsız olarak diğer yönde serbestçe yerleştirilebilir. Masonry, parçaları yalnızca tek bir yönde tanımlandığı için ızgaradan farklıdır.
Duvar örgüsünde, öğelerin görsel sırası nihai tasarımdan daha az önemlidir. Duvar düzeni, elinizdeki öğeler ne olursa olsun mevcut alanı en iyi şekilde kullanmanızı sağlar. Bu nedenle, görsel açıdan yoğun olan ve içeriğin görsel sırasının nihai sonuç kadar önemli olmadığı sayfalar için mükemmel bir seçimdir.
Duvar örgüsü düzeninin ilginç bir özelliği de öğelerin, tıpkı ızgarada olduğu gibi birden fazla parça boyunca uzanmasına izin vermesidir. Bu durumda öğeler, mevcut alanın mümkün olduğunca büyük bir kısmını dolduracak şekilde yerleştirilmeye devam eder.
Bu otomatik yerleştirme davranışı, web tasarımcılarının uzun süredir elde etmeye çalıştığı çok ilginç sonuçlar doğurabilir. Örneğin, fotoğrafların birden fazla sütunda kompakt bir şekilde nasıl gösterilebileceğini ve belirli öğelerin (bu örnekte başlık) birden fazla sütuna nasıl yayılabileceğini gösteren New York City fotoğraf galerisi demosuna göz atın:
Duvar örgüsü düzeninin kullanılabileceği diğer birkaç örneği aşağıda bulabilirsiniz.
Her yayının küçük resmini ve açıklamasını gösteren bir blog düzeni.
Makalelerin sütunlar halinde göründüğü bir haber sitesi. Bazı makaleler diğerlerinden daha geniş ve ana resimler sayfanın tamamını kaplıyor.
Farklı sütun boyutlarına sahip ve belirli fotoğrafların birden fazla sütuna yayıldığı bir fotoğraf koleksiyonu.
Geçici çözümler ve sınırlamaları
Bu tasarım kalıbını web'de uygulamak için JavaScript kitaplıklarını veya CSS grid, flexbox ya da çok sütunlu düzen kullanan geçici çözümleri kullanmanız gerekir. Ancak bu işlemin bazı dezavantajları olabilir. Örneğin:
- Daha düşük performans: CSS duvar örgüsünü taklit etmek için JavaScript kitaplıklarına veya özel koda güvenmek, performans açısından dezavantajlara yol açar ve bu da olumsuz kullanıcı deneyimlerine neden olabilir.
- Daha yüksek kod karmaşıklığı:
- CSS ızgarasında, flexbox'ta veya çok sütunlu düzende öğelerin doğru yerleştirilmesini ve alanın dağıtılmasını garanti ederek CSS duvar düzenini taklit etmek zordur.
- Birden fazla sütun veya satıra yayılan öğeler, öğelerin özel sıralaması ya da görünüm penceresine göre ayarlama gibi belirli özelliklerin işlenmesi de karmaşıklığa ve sınırlamalara yol açabilir.
- Daha büyük bakım yükü: Karmaşık özel CSS veya JavaScript kodunun bakımı daha zordur.
CSS ızgarası, çok esnek olan ve ister bir web sayfasının tamamı, ister bir bileşen, isterse yalnızca tek tek öğeleri hizalamak için olsun, birçok farklı düzen stili oluşturmanıza olanak tanıyan harika bir düzen modudur. Ancak bu düzen, duvar örgüsüyle aynı özelliklere sahip değildir.
CSS ızgarasında satırlar ve sütunlar katı bir şekilde tanımlanır ve öğeler yalnızca ızgara hücrelerinde bulunabilir. Öğeleri eksenlerden birine göre yerleştirmeye çalışıyorsanız ancak öğeler kendi hücrelerine sığacak şekilde boyutlandırılmamışsa öğeler arasında boşluk bırakmak veya boş alanı dolduracak şekilde öğeleri genişletmek arasında seçim yapmanız gerekir.
Duvarcılıkta olduğu gibi, flexbox da yalnızca bir yönü önemser ve öğelerin diğer yönde kaplamak istedikleri alana karar vermesine izin verir. Bu, öğelerin blok yönünde, her seferinde bir sütun olacak şekilde yerleştirilmesinden memnunsanız flexbox kullanarak duvar örgüsü düzenine benzeyen bir düzen elde edebileceğiniz anlamına gelir. Öğelerin yeni bir flex satırına sarmalanarak yeni bir sütun oluşturulması için flex kapsayıcının da tanımlanmış bir blok boyutu veya yüksekliği olması gerekir.
Çok sütunlu düzen, öğeleri sütunlar halinde düzenleyerek duvar örgüsü gibi görünen bir düzen de oluşturabilir. Ayrıca, çok sütunlu düzen, sütunların her birini farklı şekilde boyutlandırmanıza izin vermez. Bu düzenin tüm öğeleri aynı boyuttadır. Öte yandan, öğelerin yerleştirileceği parçaları tanımlama konusunda çok daha fazla esneklik sunan duvar örgüsü düzeni de vardır.
Burada unutulmaması gereken nokta, ızgara, esnek kutu veya çok sütunlu düzenlerin duvar düzeninden daha kötü düzenler olmadığıdır. Bunlar, birçok kullanım alanına sahip harika düzen türleridir. Önemli olan nokta şudur: Eğer istediğiniz bir duvar örgü düzeniyse bunu size CSS duvar örgü düzeni sağlayacaktır.
CSS duvar örgüsü durumu
CSS Çalışma Grubu, CSS Izgara Düzeyi 3 spesifikasyonunda duvar örgüsü oluşturuyor. Spesifikasyon hâlâ geliştirme aşamasındadır ve geçici olarak iki farklı önerilen söz dizimi içerir. Bunlardan ilki display özelliği için yeni bir anahtar kelime kullanırken ikincisinde duvar örgüsü doğrudan CSS ızgara düzenine entegre edilir.
display: masonry hareketini kullanın
Bu söz dizimi, CSS duvar örgüsünü kendi display türü olarak tanıtır. Yaklaşım ve motivasyonuyla ilgili daha fazla ayrıntıyı Google Chrome Ekibi'nin Geri bildirim gerekli: CSS duvar örgüsünü nasıl tanımlamalıyız? başlıklı blog yayınında ve bu yayının geri kalan bölümünde bulabilirsiniz. Chromium'daki mevcut prototip bu öneriye dayanmaktadır.
display: grid; grid-template-*: masonry;
Bu söz diziminde CSS duvarı doğrudan CSS ızgarasına entegre edilmiştir. Duvar örgü modu, satır tabanlı duvar örgü düzeni durumunda masonry anahtar kelimesi grid-template-columns tanımına, sütun tabanlı duvar örgü düzeni durumunda ise grid-template-rows tanımına uygulanarak tetiklenir.
Bu teklif ve gerekçesi hakkında daha fazla bilgiyi WebKit'in CSS'de Masonry için nihai söz dizimini seçmemize yardımcı olun başlıklı gönderisinde bulabilirsiniz.
Bu öneriye alternatif olarak, iki ızgara şablonu özelliğinden birini kullanmak yerine CSS duvar örgüsünü tetikleyecek item-pack
özelliği ve collapse anahtar kelimesinin kullanılabileceğini unutmayın.
Chrome ve WebKit ekiplerinin yayınladığı gönderilerden bu yana CSSWG, genel söz dizimiyle ilgili tartışmalara devam etti. Geri bildiriminiz, bu forumlarda daha fazla geliştirme yapılmasına yardımcı olabilir.
Tartışmaların mevcut durumu hakkında daha fazla bilgi için 11593 numaralı sorunu inceleyin. Bu sorunda, mevcut duvarcılık söz dizimi tartışma konuları özetlenmektedir. Ayrıca, 11243 numaralı sorunda söz dizimi tartışmasının şu ana kadarki özeti yer almaktadır.
Kendi CSS duvar düzeninizi oluşturma
Şimdi de biraz eğlenelim ve CSS ile duvar örgüsü düzeni oluşturalım.
CSS masonry'nin söz dizimi hâlâ tartışma aşamasında olsa da bu özelliğin uygulamamızı bugün Chromium'da test edebilirsiniz. Bunun için CSS Masonry'yi bugün test edin başlıklı makalede açıklandığı gibi CSS Masonry Layout işaretini etkinleştirmeniz gerekir. Aşağıdaki örneklerde, geliştirici deneme sürümünde hangi özelliklerin kullanılabildiği gösterilmektedir.
Duvar örgü container'ı oluşturma
İlk sütun tabanlı duvar örgü kabınızı oluşturmak için display:masonry öğesini kullanın ve grid-template-columns öğesini kullanarak sütun boyutlarınızı tanımlayın. masonry-direction varsayılan olarak column değerine ayarlandığından bu özelliği ayarlamak isteğe bağlıdır.
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
Bunun yerine satır tabanlı bir duvar örgü kabı için display:masonry kullanın, grid-template-rows kullanarak satır boyutlarınızı tanımlayın ve ardından masonry-direction:row değerini ayarlayın.
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
Fark etmiş olabileceğiniz gibi bu söz dizimi, Google'ın orijinal önerisinden biraz farklıdır. CSS Masonry için kullanılan tetikleyiciden bağımsız olarak CSS Çalışma Grubu, CSS Masonry düzeninde ızgara şablonu boyutlandırma ve yerleştirme özelliklerinin yeniden kullanılmasını kararlaştırdı.
Bu, düzen türleri arasında daha fazla özellik yeniden kullanımına olanak tanısa da kafa karıştırıcı olabilir. Bu konuyla ilgili görüşlerinizi bizimle paylaşmanızı isteriz. grid-template-columns ve grid-template-rows gibi özellikler için template-columns veya template-rows gibi daha genel takma adlar oluşturmayı düşünebiliriz. Bu takma adlar hem ızgara hem de duvar düzeni için kullanılabilir.
Varsayılan parça boyutunu kullanma
Yeni bir görüntüleme türü, mülk varsayılanlarını yeniden düşünme fırsatı sunar.
Izgarada, grid-template-columns ve grid-template-rows varsayılan olarak none olur. Bu, şu anda tanımlandığı şekliyle normalde tek bir sütun veya satırla sonuçlanır. Bu varsayılan değer, genellikle duvar örgüsü için istenmeyen bir düzene neden olur.
Chromium'daki uygulama, CSS duvar örgüsünde varsayılan parça boyutunun yerini alacak olan none için yeni önerilen tanımı ekler. Bu yeni varsayılan parça boyutu repeat(auto-fill, auto) değeridir. Bu değer, parça boyutlarını tanımlamanıza gerek kalmadan güzel bir duvar örgü düzeni oluşturur:
.masonry {
display: masonry;
gap: 10px;
}
Resimde gösterildiği gibi, duvar örgü kabı, mevcut alana sığacak kadar otomatik boyutlandırılmış sütun oluşturur.
CSS ızgarasında, tüm öğeler parçalar boyutlandırılmadan önce yerleştirilir. Bu nedenle, bu parça otomatik boyutlandırma tanımı mümkün değildir. Ancak CSS masonry ile yerleştirme ve boyutlandırma iç içe geçmiş ve basitleştirilmiş olduğundan bu kısıtlama artık geçerli değildir. Bu kısıtlama kaldırıldığında, duvar örgü düzenleri için daha kullanışlı bir parça varsayılan boyutu sağlayabiliriz.
masonry kısaltma özelliğini deneyin
Daha önce de belirtildiği gibi, Chromium'daki mevcut uygulama, düzeninizdeki duvar örgüsü parçasını tanımlamak için grid-template-* özelliklerini kullanır.
Ancak duvar örgüsü yalnızca tek bir boyuta sahip olduğundan, masonry kısa özellik adını da uyguladık. Bu özelliği, kafa karıştırıcı grid- önekli özellik olmadan, duvar örgüsü yönünü ve parça tanımını tek seferde tanımlamak için kullanabilirsiniz.
Örneğin, aşağıdaki iki kod snippet'i eşdeğer CSS duvar örgüleri oluşturur.
.masonry {
display: masonry;
masonry: "a a b" 50px 100px 200px row;
}
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: 50px 100px 200px;
grid-template-areas: "a" "a" "b"
}
masonry kısaltması, CSS Çalışma Grubu tarafından hâlâ tartışılmaktadır. Özelliği bugün deneyin ve düşüncelerinizi bizimle paylaşın.
Özel parça boyutlarını kullanma
Paralel yerleştirme düzeni, düzen parçalarının sayısını ve boyutlarını hassas bir şekilde ayarlamanıza olanak tanıma konusunda ızgara düzeni kadar esnektir. Örneğin, duvar örgüsü parçalarının da aynı boyutta olması gerekmez:
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
Bu örnekte, önce 3rem'lik iki parça, ardından 5rem'lik değişen sayıda parça ve son olarak 12rem'lik tek bir parça tanımlıyoruz.
Birden fazla parçayı kapsama
Örgü düzeninde, öğelerin yerleştirildikleri kanallarla sınırlı olması gerekmez. Gerekirse birden fazla kanala yayılabilirler. Bazı öğeler diğerlerinden daha önemli olduğunda ve daha fazla yer gerektirdiğinde bu özellik çok yararlı olabilir.
Örneğin:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.important-item {
grid-column: span 2;
}
Ayrıca, belirli öğeleri kapsayıcının tamamı boyunca uzatmak için bu özelliği birden fazla parça boyunca kullanabilirsiniz:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.full-bleed {
grid-column: 1 / -1;
}
Haber sitesi demosu, abonelik reklamını makalelerde göstermek için bu yöntemi kullanır.
Duvar öğesi yerleşiminde ince ayar yapma
CSS Masonry'de öğeler, en kısa çalışan konuma sahip sütuna veya satıra yerleştirilir.
İki sütunlu bir duvar örgü kapsayıcısı hayal edin. Kapsayıcının ilk sütununda 110 piksel yüksekliğinde, ikinci sütununda ise 100 piksel yüksekliğinde bir öğe varsa üçüncü öğe, ikinci sütuna yerleştirilir ve örgü yönünün başlangıcına 10 piksel daha yakın olur.
Çalıştırma konumundaki 10 piksel farkın sizin durumunuz için yeterince küçük olduğunu düşünüyorsanız ve kaynak sırasıyla daha iyi eşleşmesi için üçüncü öğenin birinci sütuna yerleştirilmesini tercih ediyorsanız item-tolerance özelliğini kullanın.
Yeni item-tolerance özelliği, öğe yerleşimindeki hassasiyeti kontrol eder.
Önceki örnekte, öğe yerleşimindeki değişkenliği özelleştirmek için kapsayıcınıza item-tolerance: 10px; uygulayabilirsiniz:
.masonry {
display: masonry;
masonry: 200px 200px;
gap: 10px;
item-tolerance: 10px;
}
Taslak spesifikasyonun bu özelliğe item-slack adını verdiğini unutmayın. CSS Çalışma Grubu kısa süre önce ad olarak item-tolerance kullanmaya karar verdi ve spesifikasyon yakında güncellenecek.
Diğer kullanılabilir özellikler
CSS Grid'de olduğu gibi, grid-row, grid-column, grid-area, grid-template-areas veya order gibi aynı şablon boyutlandırma ve yerleştirme özelliklerini kullanarak öğeleri bir duvar örgü kabının ızgara ekseninde boyutlandırıp yerleştirebilirsiniz.
Duvar düzeninizi oluştururken CSS ızgarasının tüm gücünden yararlanın.
Geri bildirim çağrısı
CSS masonry'yi keşfetmenizi, yaratıcılığınızı konuşturmanızı ve bu özelliğin size sunabileceği yeni olanakları keşfetmenizi bekliyoruz. Başlamak için demolarımızı ve kaynak kodlarını inceleyip Chromium'da kendi örneklerinizi oluşturmaya başlayabilirsiniz (önce işareti etkinleştirmeyi unutmayın).
Geri bildirimleriniz, API'yi şekillendirmemize ve web'deki ihtiyaçlarınızı karşılayacak şekilde tasarlanıp tasarlanmadığını kontrol etmemize yardımcı olur. Duvar düzenini deneyin ve görüşlerinizi bizimle paylaşın.
API'nin şekliyle ilgili düşünceleriniz veya geri bildirimleriniz varsa 11243 numaralı soruna yorum yazarak bize bildirin. Kendi blogunuzda veya sosyal medyada yayın yazmayı tercih ederseniz X ya da LinkedIn'de bize bildirmeyi unutmayın.
CSS duvar örgüsü, Chromium'da hâlâ uygulanmaktadır. Test ederseniz bu özellik üzerinde hâlâ aktif olarak çalıştığımızı ve beklendiği gibi çalışmadığı durumlarla karşılaşabileceğinizi unutmayın. Mevcut sınırlamaların bazıları arasında yoğun paketleme, ters yerleştirme, alt ızgara desteği, akış dışı destek, temel çizgi desteği, DevTools desteği, parçalama desteği ve boşluk süsleme desteği yer alır.
Özelliği test ederken bir hata bulursanız yeni bir Chromium hatası açarak geri bildiriminizi paylaşın.