Yayınlanma tarihi: 23 Temmuz 2025, Son güncelleme tarihi: 13 Şubat 2026
Microsoft Edge ve Google Chrome ekipleri, CSS duvar düzeninin Chrome ve Edge 140'tan itibaren erken geliştirici testlerine hazır olduğunu duyurmaktan heyecan duyuyor.
CSS duvar örgüsü spesifikasyonu ve söz dizimiyle ilgili açık sorunlar devam ederken geri bildirimleriniz, API'nin son şeklini belirlememize yardımcı olmak açısından çok önemlidir. Özelliği deneyin ve görüşlerinizi bizimle paylaşın.
CSS Masonry'yi Chromium'da hemen test edin
CSS Masonry'yi hemen test etmek için:
- Chrome veya Edge 140 ya da sonraki bir sürümü (veya eşleşen sürüme sahip başka bir Chromium tabanlı tarayıcı) kullanın.
- Yeni bir sekmede
about:flagsadresine gidin. - "CSS Masonry Layout"u arayın.
- İşareti etkinleştirin.
- Tarayıcıyı yeniden başlatın.
Özellik etkinleştirildiğinde, Microsoft Edge demolarına göz atarak (demoların kaynak kodunu görüntüleyin) özelliğin 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.
Duvar işçiliği nedir?
CSS duvar örgüsü, CSS ızgarası, flexbox veya çok sütunlu düzen ile kolayca elde edilemeyen bir şekilde öğeleri tuğla benzeri bir düzende yerleştirmenize olanak tanıyan bir düzen modudur.
CSS duvar örgüsü, öğeleri sütun veya satır biçiminde düzenlemek için kullanılabilir. Öğeler bu sütunlara veya satırlara daraltılmış şekilde yerleştirilir.
Duvar örgüsünü, tek kısıtlamanın farklı şeritlerin sayısı ve boyutu olduğu bir otoyol olarak düşünebilirsiniz. Araçlar, şeritlerde istedikleri uzunlukta olabilir ve her zaman hedeflerine (duvar düzeninin başlangıcı) mümkün olduğunca yakın olmaya çalışır.
Düzen öğeleriniz yalnızca bir yönde kısıtlanır ve diğer yönde serbestçe genişleyebilir. Bu, yakınlardaki diğer öğelerden bağımsızdır. Duvar örgüsü, izlerinin yalnızca tek bir yönde tanımlanması açısından ızgaradan farklıdır.
Duvar örgüsünde, öğelerin görsel sırası nihai tasarımdan daha az önemlidir. Masonry, sahip olduğunuz öğeler ne olursa olsun mevcut alandan en iyi şekilde yararlanmanı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.
Yığma düzeninin ilginç bir yönü, öğelerin birden fazla öğeyi kapsayabilmesidir. ızgarada olduğu gibi. Bu durumda öğeler, kullanılabilir 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çlara yol açabilir. Örnek olarak, 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 yayılmasına nasıl izin verileceğini gösteren New York City fotoğraf galerisi demosuna göz atın:
Karo 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üğü, bazı makalelerin diğerlerinden daha geniş olduğu ve hero resimlerin sayfanın tüm genişliğini kapladığı bir haber sitesi.
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 desenini günümüzde web'de uygulamak için JavaScript kitaplıklarını veya CSS grid, flexbox ya da çoklu sütun kullanan geçici çözümleri kullanmanız gerekir. Ancak bu işlemin bazı dezavantajları olabilir:
- 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 ödün vermeyi gerektirir ve bu da olumsuz kullanıcı deneyimlerine yol açabilir.
- Daha yüksek kod karmaşıklığı:
- CSS duvar düzenini taklit etmek için CSS ızgarası, flexbox veya çoklu sütun içinde öğelerin doğru yerleştirilmesini ve alanın doğru dağıtılmasını garanti etmek zordur.
- Birden fazla sütun veya satıra yayılan öğeler, öğelerin özel sıralaması veya 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 fazla bakım yükü: Karmaşık özel CSS veya JavaScript kodunun bakımı daha zordur.
CSS ızgarası, çok esnek olan ve tüm web sayfası, bileşen veya yalnızca tek tek öğeleri hizalamak için birçok farklı düzen stili oluşturmanıza olanak tanıyan muhteşem bir düzen modudur. Ancak, duvar örgüsüyle aynı özelliklere sahip değildir.
CSS ızgarasında satırlar ve sütunlar kesin olarak tanımlanır ve öğeler yalnızca ızgara hücrelerinde bulunabilir. Öğeleri eksenlerden biri boyunca paketlemeye çalışıyorsanız ancak öğeler ilgili hücrelerine sığacak şekilde boyutlandırılmamışsa öğeler arasında boşluk bırakmak veya boş alanı doldurmak için öğeleri uzatmak arasında seçim yapmanız gerekir.
Flexbox, tıpkı duvar örgüsü gibi yalnızca tek bir yönü dikkate alır ve öğelerin diğer yönde kaplamak istedikleri alanı belirlemesine olanak tanır. Bu, öğelerin blok yönünde, her seferinde bir sütun olacak şekilde düzenlenmesinden 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 sarmalanması ve böylece yeni bir sütun oluşturulması için flex kapsayıcının tanımlanmış bir blok boyutu veya yüksekliği de olmalıdır.
Çok sütunlu düzen, öğeleri sütunlar halinde düzenleyerek duvar örgüsüne benzeyen bir düzen de oluşturabilir. Ayrıca, çoklu sütun özelliği her bir sütunu farklı boyutlandırmanıza izin vermez. Hepsi aynı boyuttadır. Öte yandan, öğelerin yerleştirildiği sütunları tanımlama konusunda duvar örgüsü düzeni büyük esneklik sağlar.
Burada unutulmaması gereken nokta, grid, flexbox veya çok sütunlu düzenlerin, duvar örgüsü düzeninden daha kötü olmadığıdır. Bunlar, birçok kullanım alanı olan harika düzen türleridir. Önemli olan nokta şu: İstediğiniz şey bir duvar örgüsü düzeniyse CSS duvar örgüsü bunu size sağlayacaktır.
CSS duvar örgüsünün durumu
CSS Çalışma Grubu, CSS Grid Level 3 spesifikasyonunda duvar örgüsü taslağı hazırlıyor. Spesifikasyon hâlâ geliştirme aşamasındadır ve geçici olarak önerilen iki farklı söz dizimi içerir. Bunlardan ilki, display özelliği için yeni bir anahtar kelime kullanır.
İkincisinde ise 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 sunar. Yaklaşım ve motivasyonuyla ilgili daha fazla bilgiyi Google Chrome ekibinin Geri bildirim gerekiyor: 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 teklife dayanmaktadır.
display: grid; grid-template-*: masonry;
Bu söz diziminde CSS duvar örgüsü, doğrudan CSS ızgarasına entegre edilmiştir. Duvar modu, satır tabanlı duvar düzeni söz konusu olduğunda masonry anahtar kelimesinin grid-template-columns tanımına veya sütun tabanlı duvar düzeni söz konusu olduğunda grid-template-rows tanımına uygulanmasıyla tetiklenir.
Bu teklif ve motivasyonu hakkında daha fazla bilgiyi CSS'de Masonry için nihai söz dizimini seçmemize yardımcı olun başlıklı WebKit yayınında bulabilirsiniz.
Bu önerinin alternatifinin item-pack özelliği ve collapse anahtar kelimesi olduğunu unutmayın. Bu alternatif, iki ızgara şablonu özelliğinden birini kullanmak yerine CSS duvar örgüsünü tetikler.
Chrome ve WebKit ekiplerinin yayınladığı gönderilerden bu yana 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 mevcut duvar örgüsü söz dizimi tartışma konularını özetleyen 11593 numaralı sorunu ve söz dizimi tartışmasının özetini içeren 11243 numaralı sorunu inceleyin.
Kendi CSS duvar örgüsü düzeninizi oluşturma
Eğlenceli bir şeyler yapalım ve CSS duvar örgüsü düzeni oluşturalım.
CSS duvar örgüsü söz dizimi hâlâ tartışılıyor olsa da özelliğin uygulamamız, CSS duvar örgüsü düzenini bugün test edin bölümünde açıklandığı gibi 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 nelerin kullanılabildiği gösterilmektedir.
Duvar örgüsü kapsayıcısı oluşturma
İlk sütun tabanlı mozaik kapsayıcınızı oluşturmak için display:masonry kullanın ve grid-template-columns kullanarak sütun boyutlarınızı tanımlayın. masonry-direction varsayılan olarak column değerine ayarlandığından bu özelliğin ayarlanması isteğe bağlıdır.
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
Satır tabanlı bir duvar örgüsü kapsayıcısı için display:masonry kullanın, satır boyutlarınızı grid-template-rows kullanarak 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 teklifinden 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 özelliklerini yeniden kullanmaya karar verdi.
Bu sayede düzen türleri arasında daha fazla özellik yeniden kullanılabilir ancak bu durum kafa karıştırıcı olabilir. Bu konudaki görüşlerinizi öğrenmek isteriz. grid-template-columns ve grid-template-rows gibi özellikler için hem ızgara hem de duvar örgüsü için kullanılabilecek template-columns veya template-rows gibi daha genel takma adlar oluşturmayı düşünebiliriz.
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 değerine ayarlanır.
Bu, mevcut tanıma göre normalde tek bir sütun veya satırla sonuçlanır. Duvar örgüsü için bu varsayılan değer, çoğu zaman istenmeyen bir düzene neden olur.
Chromium'daki uygulama, CSS duvar örgüsündeki varsayılan parça boyutunun yerini alacak none için yeni önerilen tanımı ekler. Bu yeni varsayılan parça boyutu,
repeat(auto-fill, auto) değeridir. Bu değer, kanal boyutlarını tanımlamak zorunda kalmadan güzel bir duvar örgüsü düzeni oluşturur:
.masonry {
display: masonry;
gap: 10px;
}
Resimde gösterildiği gibi, duvar düzeni kapsayıcısı, mevcut alana sığacak kadar otomatik boyutlu sütun oluşturur.
CSS ızgarasında, tüm öğeler kanallar boyutlandırılmadan önce yerleştirilir. Bu nedenle, bu kanal otomatik boyutlandırma tanımı mümkün değildir. Ancak CSS duvar örgüsü ile yerleşim 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ıtlamanın kaldırılması, duvar örgüsü düzenleri için daha kullanışlı bir varsayılan parça boyutu sunmamıza olanak tanır.
masonry kısaltma özelliğini deneyin
Daha önce de belirtildiği gibi, Chromium'daki mevcut uygulama, düzeninizdeki duvar örgüsü kanalını tanımlamak için grid-template-* özelliklerini kullanır.
Ancak duvar örgüsü yalnızca bir boyuta sahip olduğundan, kafa karıştırıcı grid- ön ekli özellik olmadan hem duvar örgüsü yönünü hem de kanal tanımını tek seferde tanımlamak için kullanabileceğiniz masonry kısaltma özelliğini de uyguladık.
Örneğin, aşağıdaki iki kod snippet'i eşdeğer CSS duvar örgüsü kapsayıcıları 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. Hemen deneyin ve düşüncelerinizi bizimle paylaşın.
Özel parça boyutlarını kullanma
Satır ve sütun boyutlarını tanımlama konusunda duvar örgüsü, düzen satır ve sütunlarının sayısını ve boyutlarını hassas bir şekilde ayarlamanıza olanak tanıyarak ızgara kadar esneklik sağlar. Duvar örgüsü kanallarının da aynı boyutta olması gerekmez. Örneğin:
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
Bu örnekte, ilk iki 3rem parça, ardından değişen sayıda 5rem parça ve son olarak tek bir 12rem parça tanımlıyoruz.
Birden fazla parçaya yayma
Duvar örgüsünde öğelerin yerleştirildikleri kanallarla sınırlı olması gerekmez. Gerekirse birden fazla kanala yayılabilirler. Bu, bazı öğeler diğerlerinden daha önemli olduğunda ve daha fazla yer gerektirdiğinde çok yararlı olabilir.
Örneğin:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.important-item {
grid-column: span 2;
}
Belirli öğeleri kapsayıcının tüm uzunluğuna yaymak için birden fazla kanala yayma özelliğini de kullanabilirsiniz:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.full-bleed {
grid-column: 1 / -1;
}
Haber sitesi demosu, makalelerde abonelik reklamını göstermek için bu yöntemi kullanır.
Duvar öğesi yerleşiminde ince ayar yapma
CSS Masonry'de öğeler, en kısa çalışma konumuna sahip sütun veya satıra yerleştirilir.
İki sütunlu bir duvar kapsayıcısı düşünün. Kapsayıcının ilk sütununda 110 piksel yüksekliğinde bir öğe ve ikinci sütununda 100 piksel yüksekliğinde bir öğe varsa üçüncü öğe ikinci sütuna yerleştirilir ve burada duvar yönünün başlangıcına 10 piksel daha yakın olur.
Çalışma konumundaki 10 piksellik farkın sizin durumunuz için yeterince küçük olduğunu düşünüyorsanız ve üçüncü öğenin kaynak sırasına daha iyi uyması için 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.
Kullanılabilir diğer özellikler
Öğeleri bir duvar düzeni kapsayıcısının ızgara ekseninde boyutlandırmak ve yerleştirmek için CSS Izgara'da olduğu gibi aynı şablon boyutlandırma ve yerleştirme özelliklerini (ör. grid-row, grid-column, grid-area, grid-template-areas veya order) kullanabilirsiniz.
Duvar örgüsü düzeninizi oluştururken CSS ızgarasının tüm gücünden yararlanın.
Geri bildirim çağrısı
CSS duvar örgüsünü keşfetmenizi, yaratıcılığınızı konuşturmanızı ve bu özelliğin sunduğu yeni olanakları keşfetmenizi sabırsızlıkla bekliyoruz. Başlamak için demolarımıza ve kaynak kodlarına göz atabilir ve 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 tasarlandığından emin olmamıza yardımcı olur. Mozaik düzenini deneyin ve düşüncelerinizi bizimle paylaşın.
API'nin yapısı hakkında görüşleriniz veya geri bildirimleriniz varsa 11243 numaralı soruna yorum yaparak bize bildirin. Kendi blogunuzda veya sosyal medyada bir yayın yazmayı tercih ederseniz X ya da LinkedIn üzerinden bize bildirin.
CSS duvar örgüsü, Chromium'da hâlâ uygulanmaktadır. Test ederseniz bu özellik üzerinde hâlâ aktif olarak çalıştığımızı ve beklediğiniz gibi çalışmadığı durumlarla karşılaşabileceğinizi unutmayın. Mevcut sınırlamalardan bazıları arasında yoğun paketleme, ters yerleşim, alt ızgara desteği, akış dışı destek, temel destek, Geliştirici Araçları desteği, parçalama desteği, boşluk dekorasyonu desteği ve diğerleri yer alır.
Özelliği test ederken bir hata bulursanız yeni bir Chromium hatası açarak geri bildiriminizi paylaşın.