Masonry CSS Nedir? Nasıl Kullanılır?

Masonry CSS (illuminati değil) isim ve tanımlama anlamında Türkçe’ye çevirirken çok zorluk çektiğim bir kavram. O yüzden görsel örnek kullanarak açıklamak çok daha mantıklı olacak ama yine de açıklamaya çalışalım.

Masonry CSS elementleri (genellikle resimler) gird (ızgara) sistemiyle yatay ve dikey olarak otomatik olarak konumlandırmamızı sağlayan bir css kütüphanesi.

Yukarıdaki resimde bulunan HTML sayfasında gördüğünüz tüm resimler aslında farklı div elementleri içinde bulunuyor ve hiçbirine herhangi bir css tanımlaması yapılmadı. Masonry CSS kendisi bu elementleri bir ızgara yapısına getirdi. Kullanım açısından tam sayfa olarak kullanmak zorunda değilsiniz, bootstrap kullanarak container içerisinde ya da kendi oluşturduğunuz herhangi bir alanda bu şekilde grid sistemini kullanabilirsiniz.

Kütüphaneyi projenize dahil etmek için github üzerinden dosyaları edinin ve dist klasörü içindeki masonry.css dosyasını HTML dosyanıza head tagları arasında dahil edin.

Sonrasında ızgara yapısını kullanmak için masonry sınıfını kullanıyoruz ve her bir ızgara için masonry-item sınınıfı ekliyoruz.

 

Bir Cevap Yazın