CSS duvarı için alternatif bir teklif

Rachel Andrew

Yayınlanma tarihi: 30 Nisan 2024, Son güncelleme tarihi: 13 Şubat 2026

Uyarı: Eski Söz Dizimi: Bu yayındaki kod örnekleri, şu anda "Izgara şeritleri düzeni" olarak bilinen özelliğin ilk taslağına dayanmaktadır. Söz diziminin en son sürümü için css-grid-3 spesifikasyonuna bakın.

Chrome Ekibi, web'de duvar örgü tipi düzenlemelerin uygulanmasını istiyor. Ancak, son WebKit gönderisinde önerildiği gibi CSS Grid spesifikasyonunun bir parçası olarak uygulanmasının hata olacağını düşünüyoruz. Ayrıca WebKit gönderisinde, kimsenin önermediği bir duvar örgü düzeni sürümüne karşı çıkıldığını düşünüyoruz.

Bu nedenle bu yayında, Chrome ekibi olarak CSS Grid Layout spesifikasyonunun bir parçası olarak masonry'nin uygulanmasıyla ilgili endişelerimizi açıklamak ve alternatif teklifin tam olarak neyi mümkün kıldığını netleştirmek istiyoruz. Kısaca:

• Chrome ekibi, geliştiricilerin istediği bir özellik olan duvar örgüsü düzeninin engellemesini kaldırmak için çok istekli.
• Izgara spesifikasyonuna duvar örgüsü eklemek, duvar örgüsünün ızgara olup olmadığını düşünmenizin dışında başka nedenlerden dolayı sorunludur.
• Izgara spesifikasyonu dışında duvar örgüsü tanımlamak, duvar örgüsü için birden fazla parça boyutunu veya hizalama ya da boşluk gibi özelliklerin kullanımını ya da ızgara düzeninde kullanılan diğer özellikleri engellemez.

Masonry, ızgaranın bir parçası olmalı mı?

Chrome ekibi, duvar örgüsü düzeninin display: masonry kullanılarak tanımlanan ayrı bir düzen yöntemi olması gerektiğine inanıyor (veya daha iyi bir ad belirlenirse başka bir anahtar kelime kullanılabilir). Bu yayının ilerleyen bölümlerinde, bunun kodda nasıl görünebileceğine dair bazı örnekler bulabilirsiniz.

Izgara düzeninin dışında duvar örgüsü düzeninin daha iyi tanımlandığını düşünmemizin iki nedeni var: Düzen performansıyla ilgili olası sorunlar ve hem duvar örgüsü hem de ızgara düzeninin, bir düzen yönteminde mantıklı olan ancak diğerinde olmayan özelliklere sahip olması.

Not: Bu yayında, her bir sorunun eksiksiz ve ayrıntılı bir açıklaması verilmek yerine temel sorunlar vurgulanmaya çalışılmıştır. Ayrıntılı bilgi için bağlantılı sorunları ziyaret edin.

Performans

Tarayıcının boyutlandırma ve yerleştirme ile ilgili işlemleri açısından ızgara ve duvar örgüsü birbirinin tam tersidir. Bir ızgara düzenlendiğinde tüm öğeler düzenden önce yerleştirilir ve tarayıcı her parçada tam olarak ne olduğunu bilir. Bu, ızgarada çok faydalı olan karmaşık doğal boyutlandırmayı etkinleştirir. Duvar örgüsü düzeninde öğeler yerleştirilirken tarayıcı, her parçada kaç öğe olduğunu bilmez. Bu sorun, tüm doğal boyutlu parçalarda veya tüm sabit boyutlu parçalarda görülmez. Ancak sabit boyutlu ve doğal boyutlu parçaları birlikte kullanırsanız bu sorunla karşılaşabilirsiniz. Bu sorunu çözmek için tarayıcının, ölçüleri almak üzere her öğeyi olası her şekilde yerleştirerek ön yerleşim adımı atması gerekir. Bu durum, büyük bir ızgarada yerleşim performansıyla ilgili sorunlara yol açar.

Bu nedenle, ızgarada çok sık yapılan bir işlem olan grid-template-columns: 200px auto 200px parça tanımına sahip bir duvar düzeniniz varsa sorun yaşamaya başlarsınız. Alt ızgaralar eklediğinizde bu sorunlar katlanarak artar.

Çoğu kullanıcının bu sorunla karşılaşmayacağı iddia edilebilir ancak kullanıcıların çok büyük ızgaralara sahip olduğunu biliyoruz. Alternatif bir yaklaşım varken, kullanım şekli sınırlı bir ürün göndermek istemiyoruz.

Her düzen yönteminde mantıklı olmayan şeyler için ne yapıyoruz?

Flexbox ve grid CSS'ye dahil olduğunda geliştiriciler genellikle bunların tutarsız bir şekilde davrandığını düşünüyordu. Kullanıcıların yaşadığı tutarsızlık, blok düzenine dayalı olarak düzenin nasıl çalıştığıyla ilgili uzun süredir devam eden varsayımlardan kaynaklanıyordu. Zamanla geliştiriciler, biçimlendirme bağlamlarını anlamaya başladı. Izgara veya esnek biçimlendirme bağlamına geçtiğimizde bazı şeyler farklı şekilde davranır. Örneğin, flexbox'ın tek boyutlu olması nedeniyle flexbox'ta tüm hizalama yöntemlerinin kullanılamadığını bilirsiniz.

Duvar örgüsü düzenini ızgara ile birleştirme, biçimlendirme bağlamı ile hizalama özellikleri gibi öğelerin kullanılabilirliği arasındaki net bağlantıyı bozar. Bu öğeler, biçimlendirme bağlamına göre Box Alignment spesifikasyonunda tanımlanır.

Daha önce belirtilen performans sorununu, karışık doğal ve sabit parça tanımlarını duvar örgüsünde yasa dışı hale getirerek çözmeye karar verirsek ızgara düzenleri için çok yaygın olan bir kalıbın duvar örgüsünde çalışmadığını unutmamanız gerekir.

Ayrıca, çapraz kısıtlamalarınız olmadığı için duvar örgüsü düzeninde mantıklı olan ancak ızgara düzeninde geçersiz kalması gereken kalıplar da vardır. Örneğin grid-template-columns: repeat(auto-fill, max-content). Aşağıda, farklı şekilde davranmasını beklediğimiz veya farklı geçerli değerlere sahip olan özelliklerin listesi verilmiştir.

• grid-template-areas: Duvar örgüsü düzeninde yalnızca duvar örgüsü olmayan yöndeki ilk satırı belirtebilirsiniz.
• grid-template: Kısaltma, tüm farklılıkları hesaba katmalıdır.
• Yasal değerlerdeki farklılıklar nedeniyle grid-template-columns ve grid-template-rows için boyutlandırma değerlerini izleyin.
• grid-auto-flow, duvar örgüsü için geçerli değildir ve masonry-auto-flow, ızgara için geçerli değildir. Bunları birleştirmek, bulunduğunuz düzen yöntemi nedeniyle geçersiz olan öğelerle ilgili sorunlara yol açar.
• Izgarada dört yerleşim özelliği (grid-column-start vb.) vardır, duvar örgüsünde ise yalnızca iki yerleşim özelliği bulunur.
• Grid, justify-* ve align-* özelliklerinin altısını da kullanabilir ancak Masonry yalnızca flexbox gibi bir alt grubu kullanır.

Ayrıca, geliştiricilerin grid-with-masonry veya grid-without-masonry'de geçerli olmayan bir değer kullanmasından kaynaklanan tüm yeni hata durumlarında ne olacağını belirtmeniz de gerekecek. Örneğin, grid-template-columns: masonry veya grid-template-rows: masonry kullanmak geçerlidir ancak ikisini birden aynı anda kullanmak geçerli değildir. İkisini de aynı anda kullanırsanız ne olur? Tüm tarayıcıların aynı işlemi yapması için bu ayrıntıların belirtilmesi gerekir.

Bu durum, hem şu anda hem de gelecekte spesifikasyon açısından karmaşık bir hâl alıyor. Her şeyin duvar örgüsü düzenini dikkate aldığından ve duvar örgüsü düzeninde çalışıp çalışmadığından emin olmamız gerekir. Ayrıca, geliştiriciler açısından da kafa karıştırıcıdır. display: grid kullanmanıza rağmen bazı şeylerin duvar örgüsü kullanıldığı için çalışmadığını neden aklınızda tutmanız gerekir?

Alternatif bir teklif

Daha önce de belirtildiği gibi, Chrome ekibi duvar örgüsü düzenini ızgara spesifikasyonunun dışında tanımlamak istiyor. Bu, aynı sütun boyutlarına sahip çok basit bir düzen yöntemiyle sınırlı olacağı anlamına gelmez. WebKit gönderisindeki tüm demolar yine mümkün olacaktı.

Not: Örneklerde display: masonry ve masonry-* özellikleri kullanılmaktadır. Ayrı bir sorun olarak, masonry özelliğinin kullanılacak en iyi ad olup olmadığı tartışılmaktadır.

Klasik duvar işçiliği düzeni

Çoğu kişi duvar örgüsü dendiğinde birden fazla eşit boyutlu sütunun yer aldığı bir düzeni düşünür. Bu, eşdeğer paketlenmiş ızgara sürümünden daha az kod satırı gerektiren aşağıdaki CSS kullanılarak tanımlanır.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

Farklı sütun genişlikleri için ızgara türü parça boyutlandırmayı kullanma

Daha önce belirtilen, hem doğal hem de sabit parça boyutlandırmayla ilgili sorun dışında, ızgarada sevdiğiniz tüm parça boyutlandırmalarını kullanabilirsiniz. Örneğin, WebKit blog yayınındaki örnekte olduğu gibi, dar ve daha geniş sütunların tekrar eden bir kalıbı.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

Duvar örgüsü için ek parça boyutlandırma

Izgara iki boyutlu bir düzen yöntemi olduğundan, ızgarada izin vermediğimiz ek parça boyutlandırma seçenekleri vardır. Bu türler, duvar örgüsü düzeninde kullanışlı olsa da ızgara düzeninde çalışmaması kafa karıştırıcı olur.

max-content boyutlu parçaları otomatik olarak doldurma.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, max-content);
  gap: 1rem;
}

auto boyutlu parçaları otomatik olarak doldurma. Bu işlem, en büyük parçaya uyacak şekilde otomatik olarak boyutlandırılmış, aynı boyutta parçalar oluşturur.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

İçeriğin sütunlara yayılmasına ve öğelerin duvar örgü düzenine yerleştirilmesine izin verin

İçeriğin ayrı bir duvar örgü spesifikasyonunda sütunlara yayılmaması için bir neden yoktur. Bu, masonry-track özelliğini kullanabilir. Bu özellik, yalnızca bir boyuta sahip olduğunuz için masonry-track-start ve masonry-track-end için kısa bir ifadedir.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
}

.span-2 {
  masonry-track: span 2; /* spans two columns */
}

.placed {
  masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}

Duvar örgüsü parçalarını benimseyen alt duvar örgüsü veya alt ızgara

Bu, ayrı bir duvar örgü spesifikasyonuyla desteklenebilir. Ancak yine de karışık doğal ve sabit boyutlu parçalara izin verilmediği unutulmamalıdır. Bunun tam olarak nasıl görüneceği tanımlanmalıdır. Bu durumun işe yaramaması için bir neden görmüyoruz.

Sonuç

Birlikte çalışabilir şekilde gönderilebilen bir spesifikasyon noktasına ulaşmak istiyoruz. Ancak bunu hem şu anda hem de gelecekte iyi çalışacak ve geliştiricilerin güvenebileceği bir şekilde yapmak istiyoruz. Belirtilen performans sorunlarıyla başa çıkmanın tek yolu, ikinci sorunu (ızgaranın bazı bölümlerinin duvar örgüsü düzeninde yasa dışı olması) daha da kötüleştirmektir. Özellikle de farklı olan şeyleri net bir şekilde ayırırken istediğiniz tüm ızgara özelliklerine sahip olmanız mümkünken bu çözümün iyi bir çözüm olduğunu düşünmüyoruz.

Geri bildiriminiz varsa 9041 numaralı sorundaki tartışmaya katılın.

Bu yayını inceleyen ve yayına katkıda bulunan tartışmalara katılan Bramus, Tab Atkins-Bittner, Una Kravets, Ian Kilpatrick ve Chris Harrelson'a teşekkür ederiz.