Geri bildirim gerekli: CSS duvar işini nasıl tanımlamalıyız?

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

Yayınlanma tarihi: 19 Eylül 2024

CSS Çalışma Grubu, iki CSS taş döşeme önerisini tek bir taslak spesifikasyonda birleştirdi. Grup, bu sayede ikisini karşılaştırmayı ve nihai kararı vermeyi kolaylaştıracağını umuyor. Chrome ekibi, ayrı bir taş döşeme söz dizimine geçmenin en iyi yöntem olduğuna hâlâ inanıyor. Önceki gönderimizde bahsedilen en büyük performans sorunu çözüldü ancak söz dizimi, başlangıç değerleri ve ızgarayla birlikte kullanılan bir sürümün ne kadar kolay öğrenileceğiyle ilgili endişeler devam ediyor.

Ancak varsayımlarımızı test etmek için bazı örnekler üzerinde çalışarak her sürümde taş duvarın nasıl çalışacağını gösterdik. Karar verip bu özelliği kullanıma sunabilmemiz için bu yayındaki örneklere göz atın ve geri bildiriminizi bizimle paylaşın.

Bu gönderi, olası tüm kullanım alanlarını kapsamamaktadır. Ancak ızgara düzeninden ayrılan taş duvarın işlevini yitirmeyeceği açıktır. Hatta tam tersi doğru olabilir. Bu yayında göreceğiniz gibi, display: masonry sürümü yeni fırsatlar ve daha basit bir söz dizimi sunar. Ayrıca birçok geliştirici, öğeleri taş duvar düzeninde yeniden sıralamanın erişilebilirlik sorunlarına neden olabileceği konusunda endişelerini dile getirdi. Bu sorun, önerilen reading-flow mülkü aracılığıyla söz dizimi sürümlerinin her ikisi için de ele alınmaktadır.

Temel bir taş kaplama düzeni

Duvarcılık deyince çoğu insanın aklına gelen düzen budur. Öğeler satırlarda gösterilir ve ilk satır yerleştirildikten sonra sonraki öğeler daha kısa öğelerin bıraktığı alana taşınır.

display: masonry ile

Tuğla döşeme düzeni oluşturmak için display mülkü için masonry değerini kullanın. Bu işlem, tanımladığınız (veya içerik tarafından tanımlanan) sütun parçaları ve diğer eksende taş döşeme içeren bir taş döşeme düzeni 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 düzenlenir.

Parçaları tanımlamak için CSS ızgara düzeninde kullanılan parça listesi değerleriyle birlikte masonry-template-tracks kullanın.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

display: grid ile

Tuğla döşeme düzeni oluşturmak için önce display mülkü için grid değerini kullanarak bir ızgara düzeni oluşturun. Sütunları grid-template-columns özelliğiyle tanımlayın, ardından grid-template-rows için masonry değerini girin.

Bu işlem, otomatik olarak yerleştirilen ızgara öğelerinde beklediğiniz gibi bir düzen oluşturur. Ancak her satırdaki öğeler bir tuğla düzeni kullanır ve önceki satırdaki daha küçük öğelerin bıraktığı alanı kaplayacak şekilde yeniden düzenlenir.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

İki seçenek arasında dikkate alınması gereken noktalar

Bu yöntemler arasındaki önemli bir fark, display: masonrysürümünde masonry-template-tracks ile herhangi bir parça belirtmeseniz bile karo düzeni elde etmenizdir. Bu nedenle, ihtiyacınız olan tek şey display: masonry olabilir. Bunun nedeni, masonry-template-tracks değerinin ilk değerinin repeat(auto-areas, auto) olmasıdır. Düzen, kapsayıcıya sığacak kadar otomatik boyutlandırılmış parça oluşturur.

Duvarcılıkla ters akış

Bu dokümanda, taş döşeme akışının yönünü değiştirmenin yolları açıklanmaktadır. Örneğin, akışı blok sonundan itibaren gösterilecek şekilde değiştirebilirsiniz.

display: masonry ile

display: masonry ile bir taş döşeme düzeni oluşturun, ardından column-reverse değerine sahip masonry-direction 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 karo düzeni oluşturun. Ardından, öğelerin ızgara kapsayıcısının blok ucundan düzenlenmesini sağlamak için grid-auto-flow özelliğini row-reverse değerine ayarlayın.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  grid-auto-flow: row-reverse;
}

İki seçenek arasında dikkate alınması gereken noktalar

display: masonry sürümü, flexbox'un işleyişine çok benzer. column-reverse değerine sahip masonry-direction mülkünü kullanarak sütunların akışı yönünü değiştirin.

CSS ızgara sürümü grid-auto-flow kullanır. Şu anda tanımlandığı şekliyle grid-auto-flow: row-reverse ve grid-auto-flow: column-reverse aynı etkiyi verir. Bu durum, farklı bir şey yapmalarını beklediğiniz için kafa karıştırıcı olabilir.

Satırlarda taş/tuğla duvar

Satırları tanımlamak için yönü de değiştirebilirsiniz.

display: masonry ile

display: masonry ile bir karo 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 varsayılan olarak auto olduğu için herhangi bir parça boyutu belirtmeniz gerekmez. Bu nedenle parçalar, içerdikleri içeriğe 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 dikkate alınması 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ısaltma kullanıyorsanız söz dizimi sırasını değiştirin.

Geçiş akışı örneklerindeki her iki durumda da display: masonry sürümü daha sezgiseldir. Akış kontrolü yapan tek bir masonry-direction mülkü vardır. Bu mülk aşağıdaki değerlerden birini alır:

• row
• column
• row-reverse
• column-reverse

Ardından, varsayılan otomatik değerin ihtiyacınız olan değer olmadığı varsayılarak masonry-template-tracks için gereken tüm beden bilgilerini ekleyin.

Izgarada ters yönde yapmak için grid-auto-flow özelliğini, satır taş döşemesi yapmak için ise grid-template-* özelliklerinin değerini değiştirmeniz gerekir. Ayrıca mevcut ızgara söz diziminde, ızgara ekseninin değerini tanımlanmamış olarak bırakmak mümkün değildir. Eksende masonry değeri olmayan grid-template-* özelliklerini her zaman belirtmeniz gerekir.

Öğeleri konumlandırma

Her iki sürümde de, ızgara düzeninden aşina olacağınız satır tabanlı yerleşimi kullanarak öğeleri açıkça konumlandırabilirsiniz. Her iki sürümde de öğeleri yalnızca ızgara eksenine yerleştirebilirsiniz. Bu, önceden tanımlanmış kanalların bulunduğu eksendir. Öğeleri, karo düzenini yapan eksene yerleştiremezsiniz.

display: masonry ile

Aşağıdaki CSS, dört sütunlu bir taş döşeme düzenini tanımlar. Bu nedenle, ızgara ekseni sütunlardır. a sınıfına sahip öğe, ilk sütun satırından üçüncü sütun satırına yerleştirilir ve yeni masonry-track-* mülkleriyle iki kanalı kapsar. 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 taş döşeme düzenini tanımlar. Bu nedenle, ızgara ekseni sütunlardır. a sınıfına sahip öğe, grid-column-* mülkleriyle iki kanalı kapsayacak şekilde ilk sütun satırından üçüncü sütun satırına yerleştirilir. Bu, grid-column: 1 / 3; kısaltması olarak da tanımlanabilir.

Izgara ekseni sütunlar ise grid-row-* özellikleri, ızgara ekseni satırlar 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 dizimi ile de kullanabilirsiniz. Aşağıdaki örneklerde, a adlı iki sütun satırı içeren 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 */
}

Adlandırılmış alanları her iki söz diziminde de kullanabilirsiniz. Aşağıdaki örneklerde "a", "b" ve "c" adlı üç kanal içeren bir ızgara gösterilmektedir.

display: masonry ile

Parçalar, masonry-template-areas değerine göre adlandırılır. Parça boyutu tanımlanmadığından üçünün de varsayılan boyutu auto olur. Öğe "a" kanalına yerleştirilir.

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

Bu, satırları veya sütunları tanımlarken aynı şekilde çalışır. Tek fark masonry-direction mülküdür.

display: grid ile

sütunlar için söz dizimi temelde aynıdır. Benzer şekilde, hiçbir kanal boyutu tanımlanmadığından üçü de varsayılan olarak auto boyutundadır ancak diğer eksenin taş döşeme 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 grid-template-areas aslında iki boyutlu bir alanı tanımladığı ve her satır ayrı bir dize olarak yazıldığı için satır için değerin farklı şekilde yazılması gerekir:

.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 dikkate alınması gereken noktalar

Yön değiştirme söz konusu olduğunda, display: masonry söz dizimi tüm konumlandırmalarda daha iyi çalışır. masonry-track-* mülkü, ızgara ekseninin hangi yönde olduğuna bağlı olarak çalıştığından, yönü değiştirmek için tek yapmanız gereken masonry-direction değerini değiştirmektir. Izgara sürümünde, geçişi etkinleştirmek için en azından yedek mülkleriniz olmalıdı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 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ısalığında masonry anahtar kelimesi kullanılır. Temel taş döşeme 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ı taş döşeme düzeni oluşturmak için:

.masonry {
  display: masonry;
  masonry: row;
}

Parçaları ve satır tabanlı bir düzeni kısayol kullanarak tanımlamak için:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr) row;
}

display: grid ile

grid kısaltmasını kullanarak temel taş döşeme düzenini oluşturmak için.

.masonry {
  display: grid;
  grid: masonry / repeat(3, 1fr);
}

Basit bir satır tabanlı taş döşeme 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ğu için çok karmaşık hale gelmeden kısaltmaya daha fazla özellik eklenebilir.

Örneğin, "a", "b" ve "c" adlı, aşağıdan yukarıya doğru doldurulmuş üç sütun oluşturduğunuzu düşünün.

display:masonry ile

display: masonry'te bunların üçü de kısaltmada 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 eklemek isterseniz bunu yapabilirsiniz. Örneğin: masonry: column-reverse 50px 100px 200px "a b c";.

Ayrıca her bileşen özgürce yeniden sıralanabilir. Hatırlamanız gereken belirli bir sıra yoktur. Bunun yerine satırlar yapmak istiyorsanız tek yapmanız gereken column-reverse değerini row veya row-reverse ile değiştirmek. Söz dizimi geri kalanı aynı kalır.

display: grid ile

display: grid içinde bu üç özelliğin 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;
}

Dilerseniz boyutları ve alan adlarını birlikte ayarlamak için "ızgara"yı kullanabilirsiniz:

.masonry {
  display: grid;
  grid: "a b c" masonry / 50px 100px 200px;
  grid-auto-flow: wrap-reverse;
}

Bu örneklerin her ikisinde de sıra kesinlikle gereklidir ve satırları tercih ediyorsanız 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ısaltmada toplayabilirsiniz:

.masonry {
  display: grid;
  grid: "a" 50px "b" 100px "c"  200px / masonry;
}

İki seçenek arasında dikkate alınması gereken noktalar

display: masonry kısayolu, nispeten basit bir kısayol olması nedeniyle yaygın olarak kullanılacaktır. Birçok durumda, "standart" bir taş döşeme düzeni için yalnızca kanal 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 seyrek kullanılır. Önceki örneklerde gösterildiği gibi, basit taş döşeme düzenleri için kullanıldığında bile değerlerin sırasını belirlerken dikkatli olunmalıdır.

Dikkat edilmesi gereken diğer noktalar

Bu yayında, günümüzde yaygın olarak kullanılan bazı kullanım alanlarına değiniliyor ancak gelecekte ızgara veya karo düzeninin ne gibi kullanım alanlarına sahip olabileceğini bilmiyoruz. Ayrı display: masonry söz dizimini kullanmanın en önemli nedenlerinden biri, bu ikisinin gelecekte farklılaşmasına olanak tanımasıdır. Özellikle ilk değerlerde (masonry-template-tracks için olanlar gibi) karo düzeninde ızgaradan farklı bir şey yapmak yararlı olabilir. display: grid sürümünü kullanırsak ızgara varsayılanlarını değiştiremeyiz. Bu durum, gelecekte yapmak isteyebileceğimiz işlemleri sınırlayabilir.

Bu örneklerde, taş döşeme kullanılıyorsa tarayıcıda ızgara için geçerli olan özelliklerin yoksayılması gereken yerleri görebilirsiniz. Örneğin, iki boyutlu bir ızgara düzeni tanımladığı için değerlerin çoğunun atlandığı grid-template-areas. Duvar düzeninde ise yalnızca bir yönü tam olarak tanımlarız.

Geri bildiriminizi gönderin

Bu örneklere ve her bir sürümü diğerinin yanında gösteren taslak spesifikasyona göz atın. 9041 numaralı sorun hakkında yorum yaparak fikrinizi bizimle paylaşın. Kendi blogunuzda veya sosyal medyada bir yayın yazmak isterseniz X ya da LinkedIn üzerinden bize bildirin.