Mozaik Yerleşimi: CSS ve JS Yaklaşımları

Duvar örgüsü düzeni, her öğenin bir sonraki kullanılabilir dikey alanı dolduracağı sütunlara öğeler yerleştirir; Pinterest'teki gibi. Öğelerin sütun genişlikleri eşittir, ancak yükseklikleri değişkendir. Sonuç, satırlar arasında boşa giden beyaz alan bulunmayan, yoğun ve görsel açıdan dinamik bir ızgaradır.

Bir özellik bayrağının arkasında çalışan Chrome ve Firefox, grid-template-rows: masonry özelliğini destekler. Öğeler sütunlara yerleştirilir, ancak satırlar içerik yüksekliklerine göre boyutlandırılır; böylece değişken yükseklikteki öğeler boşluk bırakmadan yerleşebilir. Bu, gelecekteki yerel çözümdür.

CSS sütunları, duvar örgüsüne benzer bir düzen oluşturur: columns: 3; column-gap: 1rem. Öğeler her sütunda otomatik olarak yukarıdan aşağıya akar. Sınırlama: öğeler satır satır değil, sütun sütun sıralanır (1. sütunun üstü, 2. sütunun üstü...); bu durum okuma sırasını ve erişilebilirliği etkiler.

Öğelerin sütunlar arasında bölünmesini önleyin: her öğede break-inside: avoid kullanın. Bu olmadan uzun bir kart iki sütuna bölünebilir ve içeriği ortadan kesebilir. Kart benzeri içerik için CSS sütunlarını kullanırken bunu her zaman ekleyin.

Masonry.js (David DeSandro tarafından), sütun yüksekliklerini hesaplayıp her öğeyi en kısa sütuna yerleştirerek mutlak konumlandırılmış öğeleri yeniden konumlandırır. Isotope buna sıralama ve filtreleme özelliklerini ekler. Her ikisi de konumları hesaplamak ve uygulamak için JavaScript gerektirir.

Hafif bir yaklaşım: sabit sütunlara ve 1 piksellik satırlara sahip bir ızgara tanımlayın, ardından içerik yüksekliğine / satır yüksekliğine göre her öğede grid-row-end: span N ayarlamak için JS kullanın. Öğeler, değişken yüksekliklere ulaşırken ızgara satırı hizalamasını korur.

Duvar örgüsü konumları, pencere boyutu değiştiğinde veya görseller yüklendiğinde geçerliliğini yitirir. Boyut değişikliklerini algılamak ve yeniden hesaplamayı tetiklemek için ResizeObserver kullanın. Hızlı yeniden boyutlandırma olayları sırasında aşırı hesaplamayı önlemek için yeniden hesaplamaları geciktirerek birleştirin.

Yükseklikleri bilinmeyen görseller, yüklendikten sonra duvar örgüsünün yeniden hesaplanmasına neden olur. Tarayıcının yükleme öncesinde alan ayırabilmesi için tüm görsellerde açık genişlik ve yükseklik öznitelikleri sağlayın. Bu, konum kaymalarını önler ve yeniden hesaplama geçişlerinin sayısını azaltır.

Bir duvar örgüsü düzenine öğe eklemek, tüm ızgarayı değil yalnızca etkilenen sütunları (yeni öğelerin bulunduğu sütunları) yeniden hesaplamayı gerektirir. Masonry.js gibi kütüphaneler, eklenen öğe animasyonunu ve her yeni grup için tüm düzeni yeniden kurmadan artımlı düzenlemeyi destekler.

JavaScript ile konumlandırılan düzenlerde görsel duvar örgüsü sırası, DOM sırasından farklıdır. Sekme sırasının görsel konumu değil, DOM sırasını (mantıksal okuma sırasını) izlemesini sağlayın. tabindex özniteliğini dikkatli ekleyin veya klavye gezintisi için doğal DOM akışına güvenin.

CSS sütunları basittir ve JS gerektirmez; ancak sütun sıralı (satır sıralı olmayan) bir okuma dizisine sahiptir ve filtreleme ya da sıralama sunmaz. Izgara duvar örgüsü henüz üretimde desteklenmemektedir. JS duvar örgüsü kapsamlı özellikler sunar, ancak konumlar içerik yüklendikten sonra hesaplandığı için ek yük ve işleme gecikmesi getirir.

Bir kartın iki CSS sütununa bölünmesini hangi CSS özelliği önler?

Duvar örgüsü düzeni; CSS sütunlarıyla (basit ancak sütun sıralı), deneysel grid-template-rows: masonry ile (geleceğe dönük) veya Masonry.js gibi JavaScript kütüphaneleriyle (sıralama ve filtreleme özellikleriyle kapsamlı) oluşturulabilir. Her yaklaşım basitlik, erişilebilirlik ve yetenek arasında farklı ödünleşimler içerir.