Yayınlanma tarihi: 19 Eylül 2024, Son güncelleme tarihi: 13 Şubat 2026
CSS Çalışma Grubu, iki CSS duvarcılık önerisini birleştirerek tek bir taslak spesifikasyon oluşturdu. Grup, bu değişikliğin iki hizmeti karşılaştırmayı ve nihai karar vermeyi kolaylaştıracağını umuyor. Chrome ekibi, ayrı bir duvar söz diziminin ilerlemek için en iyi yol olduğuna inanmaya devam ediyor. Önceki gönderimizde bahsedilen en büyük performans sorunu çözülmüş olsa da söz dizimi, başlangıç değerleri ve ızgarayla birleştirilmiş bir sürümün öğrenilmesinin ne kadar kolay olacağıyla ilgili endişeler devam ediyor.
Ancak varsayımlarımızı test etmek için, her sürümde duvar örgüsü düzeninin nasıl çalışacağını göstermek üzere bazı örnekler üzerinde çalıştık. Bu yayındaki örneklere göz atın ve geri bildiriminizi bizimle paylaşın. Böylece bu özellik hakkında karar verip süreci devam ettirebiliriz.
Bu yayında olası tüm kullanım alanları ele alınmamıştır ancak duvar örgüsü düzeninin ızgara düzeninden ayrılmasının, özelliğin işlevselliğini etkilemeyeceği açıktır. Hatta bunun tam tersi geçerli olabilir. Bu yayında da göreceğiniz gibi, display: masonry sürümü yeni fırsatlar ve daha basit bir söz dizimi sunuyor.
Ayrıca birçok geliştirici, öğelerin Masonry ile yeniden sıralanmasının erişilebilirlik sorunlarına yol açma potansiyeliyle ilgili endişelerini dile getirdi. Bu sorun, önerilen reading-flow özelliği aracılığıyla söz diziminin her iki sürümü için de ele alınmaktadır.
Temel bir taş duvar düzeni
Bu, çoğu kişinin duvarcılıkla ilgili düşünürken hayal ettiği düzendir. Öğeler satırlar halinde gösterilir ve ilk satır yerleştirildikten sonraki öğeler, daha kısa öğelerin bıraktığı boşluğa taşınır.
display: masonry ile
Duvar örgü düzeni oluşturmak için display özelliği için masonry değerini kullanın. Bu, tanımladığınız (veya içerik tarafından tanımlanan) sütun izlerine sahip bir duvar örgüsü düzeni ve diğer eksende duvar örgüsü oluşturur. İlk öğe, blok ve satır içi başlangıçta (bu nedenle İngilizcede sol üstte) gösterilir ve öğeler satır içi yönde yerleştirilir.
Parçaları tanımlamak için CSS ızgara düzeninde kullanılan parça listeleme değerleriyle birlikte masonry-template-tracks simgesini kullanın.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
display: grid ile
Duvar örgü düzeni oluşturmak için öncelikle display özelliği için grid değerini kullanarak bir ızgara düzeni oluşturun. grid-template-columns özelliğiyle sütunları tanımlayın, ardından grid-template-rows öğesine masonry değerini verin.
Bu, otomatik olarak yerleştirilmiş ızgara öğeleriyle beklediğiniz gibi bir düzen oluşturur. Ancak her satırdaki öğeler, duvar düzenini kullanır ve önceki satırdaki daha küçük öğelerin bıraktığı alanı dolduracak şekilde yeniden düzenlenir.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
İki seçenek arasında karar verirken göz önünde bulundurulması gereken noktalar
Bu yöntemler arasındaki önemli bir fark, display: masonry
sürümünde, masonry-template-tracks ile herhangi bir parça belirtmeseniz bile duvar örgüsü düzeni elde etmenizdir. Bu nedenle display: masonry ihtiyacınızı karşılayabilir.
Bunun nedeni, masonry-template-tracks değerinin başlangıçta repeat(auto-areas, auto) olmasıdır. Düzen, kapsayıcıya sığacak kadar otomatik boyutlandırılmış parça oluşturur.
Duvar işçiliğiyle ters akış
Bu spesifikasyon, duvar örgü akışının yönünü değiştirme yöntemlerini içerir. Örneğin, akışı blok sonundan başlayarak gösterecek şekilde değiştirebilirsiniz.
display: masonry ile
display: masonry ile bir duvar düzeni oluşturun, ardından masonry-direction öğesini column-reverse değeriyle birlikte kullanın.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
display: grid ile
display: grid ve grid-template-rows: masonry ile duvar örgü düzeni oluşturun.
Ardından, öğelerin ızgara kapsayıcının blok sonundan düzenlenmesini sağlamak için grid-auto-flow özelliğini row-reverse yeni değeriyle kullanın.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
İki seçenek arasında karar verirken göz önünde bulundurulması gereken noktalar
display: masonry sürümü, flexbox'ın çalışma şekline çok benzer. masonry-direction özelliğiyle column-reverse değerini kullanarak sütunların akış yönünü değiştirin.
CSS ızgara sürümünde grid-auto-flow kullanılır. Şu anda tanımlandığı şekliyle grid-auto-flow: row-reverse ve grid-auto-flow: column-reverse aynı etkiyi verir. Bu durum, farklı bir işlem yapmalarını beklediğiniz için kafa karıştırıcı olabilir.
Satırlar için duvar
Satırları tanımlamak için yönü de değiştirebilirsiniz.
display: masonry ile
display: masonry ile bir duvar örgü düzeni oluşturun, ardından masonry-direction değerini row olarak ayarlayın. Satırlarınızın belirli bir blok boyutuna sahip olmasını istemiyorsanız herhangi bir parça boyutu belirtmeniz gerekmez. Varsayılan boyut auto olduğundan parçalar, içeriklerine göre boyutlandırılır.
.masonry {
display: masonry;
masonry-direction: row;
}
display: grid ile
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
İki seçenek arasında karar verirken göz önünde bulundurulması gereken noktalar
Ters akışta olduğu gibi, display: masonry sürümünü sütunlardan satırlara değiştirmek, masonry-direction değerini değiştirmek anlamına gelir. Izgara sürümünde, grid-template-columns ve grid-template-rows özelliklerinin değerlerini değiştirmeniz gerekir. Kısaltmayı kullanıyorsanız söz diziminin sırasını değiştirin.
Her iki geçiş akışı örneğinde de display: masonry sürümü daha sezgisel görünüyor. Akışı kontrol eden tek bir özellik vardır
masonry-direction. Bu özellik aşağıdaki değerlerden birini alır:
rowcolumnrow-reversecolumn-reverse
Ardından, varsayılan otomatik değerin ihtiyacınızı karşılamadığını varsayarak masonry-template-tracks için gereken tüm boyutlandırma bilgilerini eklersiniz.
Izgarada ters yönde ilerlemek için grid-auto-flow özelliğini, satır duvar örgüsü yapmak için ise grid-template-* özelliklerinin değerini değiştirmeniz gerekir. Ayrıca, mevcut ızgara söz diziminde ızgara ekseninin değeri tanımlanmamış olarak bırakılamaz. grid-template-* özelliklerini her zaman masonry değeri olmayan eksende belirtmeniz gerekir.
Öğeleri konumlandırma
Her iki sürümde de, öğeleri ızgara düzeninden bildiğiniz satıra dayalı yerleşimi kullanarak açıkça konumlandırabilirsiniz. Her iki sürümde de öğeleri yalnızca ızgara eksenine (önceden tanımlanmış parçalara sahip eksen) yerleştirebilirsiniz. Öğeleri, duvar örgü düzenini kullanan eksene yerleştiremezsiniz.
display: masonry ile
Aşağıdaki CSS, dört sütunlu bir duvar düzeni tanımlar. Bu nedenle, ızgara ekseni sütunlardır. a sınıfına sahip öğe, birinci sütun satırından üçüncü sütun satırına yerleştirilir ve yeni masonry-track-* özellikleriyle iki parça boyunca uzanır. Bu, masonry-track: 1 / 3; kısaltması olarak da tanımlanabilir.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
display: grid ile
Aşağıdaki CSS, dört sütunlu bir duvar düzeni tanımlar. Bu nedenle, ızgara ekseni sütunlardır. a sınıfına sahip öğe, birinci sütun satırından üçüncü sütun satırına yerleştirilir ve grid-column-* özellikleriyle iki parça kapsar. Bu, grid-column: 1 / 3; kısaltması olarak da tanımlanabilir.
Izgara ekseni sütun ise grid-row-* özellikleri, satır ise grid-columns-* özellikleri yoksayılır.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Adlandırılmış satırları her iki söz dizimiyle de kullanabilirsiniz. Aşağıdaki örneklerde a adlı iki sütun çizgisi olan bir ızgara gösterilmektedir.
display: masonry ile
Adlandırılmış satırlar, masonry-template-tracks öğesinin parça listesi değerinde tanımlanır. Öğe, a adlı herhangi bir satırdan sonra yerleştirilebilir.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
display: grid ile
Adlandırılmış satırlar, grid-template-columns öğesinin parça listesi değerinde tanımlanır. Öğe, a adlı ilk satırın sonuna yerleştirilir. grid-row özelliği tanımlanmışsa yoksayılır.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
Her iki söz diziminde de adlandırılmış alanları kullanabilirsiniz. Aşağıdaki örneklerde "a", "b" ve "c" adlı üç parçalı bir ızgara gösterilmektedir.
display: masonry ile
Parçalara masonry-template-areas değerinin adı verilir. Parça boyutları tanımlanmadığından üçü de varsayılan olarak auto boyutundadır. Öğe, "a" parçasında yer alır.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Bu özellik, satırları veya sütunları tanımlamanızdan bağımsız olarak aynı şekilde çalışır. Tek fark masonry-direction özelliği olur.
display: grid ile
Sütunlar için söz dizimi temelde aynıdır. Benzer şekilde, parça boyutları tanımlanmadığından üçü de varsayılan olarak auto boyutundadır ancak diğer eksenin duvar örgüsü olduğunu açıkça belirtmeniz gerekir:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Ancak satırlar için değer farklı şekilde yazılmalıdır. Çünkü grid-template-areas aslında iki boyutlu bir alanı tanımlar ve her satır ayrı bir dize olarak yazılır:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
İki seçenek arasında karar verirken göz önünde bulundurulması gereken noktalar
display: masonry söz dizimi, yön değiştirme konusunda herhangi bir konumlandırmada daha iyi sonuç verir. masonry-track-* özelliği, ızgara ekseninin hangi yönde olduğu fark etmeksizin çalıştığı için yönü değiştirmek için tek yapmanız gereken masonry-direction değerini değiştirmektir. Tablo sürümünde, geçişi etkinleştirmek için en azından yedekli özelliklere ihtiyacınız vardır. Ancak, yön değiştirmenin ızgara sürümünde daha karmaşık olduğu diğer yollar için önceki örneklere bakın.
Kısaltmalar
Bu yayında, hangi özelliklerin kullanıldığını daha net bir şekilde belirtmek için uzun biçimler kullanılmıştır. Ancak hem display: masonry hem de display: grid sürümleri kısa biçimler kullanılarak tanımlanabilir.
display: masonry ile
display: masonry kısaltması, masonry anahtar kelimesini kullanır. Temel duvar örgü düzenini oluşturmak için aşağıdaki CSS'yi kullanın:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Basit bir satır tabanlı duvar örgü düzeni oluşturmak için:
.masonry {
display: masonry;
masonry: row;
}
Kısaltma kullanarak parçaları ve satır tabanlı bir düzeni tanımlamak için:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
display: grid ile
grid kısaltmasını kullanarak temel duvar örgü düzenini oluşturmak için.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Basit bir satır tabanlı duvar örgü düzeni oluşturmak için:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
Daha karmaşık örneklerde, genel display:masonry söz dizimi daha basit olduğundan, çok karmaşık hale gelmeden daha fazla özellik kısaltmaya eklenebilir.
Örneğin, alttan üste doğru doldurulmuş "a", "b" ve "c" adlı üç sütun oluşturduğunuzu düşünün.
display:masonry ile
display: masonry içinde bu üçü de kısaltma olarak birlikte ayarlanabilir:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Otomatik olarak boyutlandırıldıkları için boyutları belirtmeniz gerekmez ancak bunun yerine belirli bir boyut isterseniz bu boyut eklenebilir. Örneğin:
masonry: column-reverse 50px 100px 200px "a b c";.
Ayrıca her bileşen serbestçe yeniden sıralanabilir. Unutmanız gereken belirli bir sıra yoktur. Bunun yerine satırları kullanmak isterseniz column-reverse yerine row veya row-reverse yazmanız yeterlidir. Söz diziminin geri kalanı aynı kalır.
display: grid ile
display: grid içinde bu üç yönün ayrı ayrı ayarlanması gerekir:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Duvar örneğinde olduğu gibi, bu işlem tüm sütunları auto boyutunda yapar. Ancak açık boyutlar sağlamak isterseniz bunu yapabilirsiniz:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Alternatif olarak, boyutları ve alan adlarını birlikte ayarlamak için "grid" özelliğini kullanmak istiyorsanız:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
Bu iki örnekte de sıra kesinlikle gereklidir ve satırları tercih etmeniz durumunda farklıdır. Örneğin, satırlara geçiş şu şekilde görünür:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Dilerseniz hepsini tek bir kısaltma olarak da yazabilirsiniz:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
İki seçenek arasında karar verirken göz önünde bulundurulması gereken noktalar
display: masonry kısaltması, nispeten basit bir kısaltma olduğundan yaygın olarak kullanılabilir. Çoğu durumda, "standart" bir duvar örgüsü düzeni için yalnızca parça tanımlarını ayarlarsınız. Diğer tüm değerler varsayılan olarak kabul edilebilir.
display: grid sürümünde, mevcut grid kısaltması kullanılır. Bu kısaltma oldukça karmaşıktır ve deneyimlerimize göre geliştiriciler tarafından daha az kullanılır. Önceki örneklerde gösterildiği gibi, basit duvar düzenleri için kullanıldığında bile değerlerin sırasını ayarlarken dikkatli olmak gerekir.
Dikkat edilmesi gereken diğer noktalar
Bu gönderide, günümüzdeki bazı yaygın kullanım alanları ele alınmaktadır. Ancak ızgara veya duvar düzeninin gelecekte nasıl bir rol oynayacağını bilmiyoruz. Ayrı display: masonry söz dizimini kullanmanın en büyük avantajı, gelecekte ikisinin farklılaşmasına olanak tanımasıdır. Özellikle masonry-template-tracks gibi başlangıç değerlerinde, ızgarada yapılanlardan farklı bir şey yapmak faydalı olabilir. display: grid sürümünü kullanırsak ızgara varsayılanlarını değiştiremeyiz. Bu durum, gelecekte yapmak isteyebileceğimiz şeyleri sınırlayabilir.
Bu örneklerde, tarayıcının duvar örgüsü kullanılıyorsa ızgarada geçerli olan özellikleri yoksayması gereken yerleri görebilirsiniz.
Örneğin, değerlerin çoğu iki boyutlu bir ızgara düzeni tanımladığından grid-template-areas'da atılırken duvar örgüsünde yalnızca bir yönü tam olarak tanımlarız.
Geri bildiriminizi paylaşın
Bu örneklere ve her sürümü yan yana gösteren spesifikasyon taslağına göz atın. 9041 numaralı soruna yorum yazarak düşüncelerinizi bizimle paylaşın. Kendi blogunuzda veya sosyal medyada yayın yazmayı tercih ederseniz X ya da LinkedIn'de bize bildirmeyi unutmayın.