Yayınlanma tarihi: 23 Temmuz 2025, Son güncelleme tarihi: 13 Şubat 2026
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 önemlidir. Ö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ümleri (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"u (CSS Duvar Örgüsü Düzeni) arayı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 edilemeyen bir şekilde, öğelerden 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.
Duvarcılıkta, öğ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ünün ilginç bir yönü de öğelerin, tıpkı ızgarada olduğu gibi birden fazla parça boyunca yayılması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, New York City fotoğraf galerisi demosuna göz atın. Bu demo, 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österir:
Duvar örgüsü düzeninin kullanılabileceği diğer bazı örnekleri 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şlemi yapmanın bazı dezavantajları vardır. Ö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ır içeren öğeler, öğelerin özel sıralaması ya da görüntü alanına 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 tüm bir web sayfası, ister bir bileşen için, 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.
Flexbox, tıpkı duvar işçiliği gibi yalnızca bir yönü önemser ve öğelerin diğer yönde kaplamak istedikleri alanı belirlemelerine olanak tanır. 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 tanımlanmış bir blok boyutu veya yüksekliği de 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. Tüm öğeler aynı boyuttadır. Öte yandan, öğelerin yerleştirileceği parçaları tanımlama konusunda çok fazla esneklik sunar.
Burada hatırlanması 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 nokta şudur: Eğer istediğiniz şey bir duvar örgüsü düzeniyse CSS duvar örgüsü bunu size 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 edilir. 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 Help us choose the final syntax for Masonry in CSS (CSS'de Masonry için son söz dizimini seçmemize yardımcı olun) başlıklı gönderisinde bulabilirsiniz.
Bu önerinin alternatifi olarak, iki ızgara şablonu özelliğinden birini kullanmak yerine CSS duvar örgüsünü tetikleyecek olan item-pack
özelliği ve collapse anahtar kelimesinin kullanılabileceğini unutmayın.
Chrome ve WebKit ekiplerinin yayınladığı gönderilerden sonra CSSWG, ilerlemek için 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 issue 11593'ü inceleyin. Bu makalede, mevcut duvar örgü söz dizimi tartışma konuları özetlenmektedir. Ayrıca, issue 11243'te 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 duvar örgüsü söz dizimiyle ilgili tartışmalar devam etse de bu özelliği uygulama şeklimiz, Test CSS Masonry today (CSS duvar örgüsünü bugün test edin) başlıklı makalede açıklandığı gibi CSS Masonry Layout (CSS duvar örgüsü düzeni) işaretini etkinleştirerek Chromium'da test edilebilir. 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 edeceğiniz üzere 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. Hem ızgara hem de duvar için kullanılabilecek template-columns veya template-rows gibi grid-template-columns ve grid-template-rows özellikleri için daha genel takma adlar oluşturmayı düşünebiliriz.
Varsayılan parça boyutunu kullanma
Yeni bir görüntüleme türüyle birlikte mülk varsayılanlarını yeniden düşünme fırsatı doğar.
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ımlamaya 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ısaltma özelliğini de 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şim, düzen parçalarının sayısını ve boyutlarını hassas bir şekilde ayarlamanıza olanak tanıma konusunda ızgara kadar esnektir. Örneğin, Masonry parçalarının tümü aynı boyutta olmak zorunda değildir:
.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ı uzunluğunda yapmak 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 bir öğe, 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 ilk 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ği item-slack olarak adlandırdığını 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ünü deneyimleyin.
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 taslandığını kontrol etmemize yardımcı olması açısından önemlidir. Duvar düzenini deneyin ve düşüncelerinizi 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 veya 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ırlamalardan bazıları arasında yoğun paketleme, ters yerleştirme, alt ızgara desteği, akış dışı destek, temel çizgi desteği, Geliştirici Araçları desteği, parçalanma 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.