Masonry Grid Kullanımı


Merhaba, bu yazıda sizlere Masonry Grid‘den bahsetmek istiyorum.
İlk önce bu eklentiye bir göz atmak ve indirmek için http://masonry.desandro.com/ adresini ziyaret edebilirsiniz.
Kullanıma başlamadan önce ilk olarak normal grid ve masonry grid arasındaki görünüme ve farka bir göz atalım.

Normal Grid : Masonry Grid :
   

Görselde göründüğü gibi Masonry Grid’in Normal Grid’den farkı boş alanları tamamen doldurması ve kendini çözünürlüğe göre otomatik büyültüp küçültülmesidir yani kısaca (responsive) özelliği mevcuttur. bunun yanında Masonry Grid kendine has özellikleri ile Grid <div> içinde özel {class}’lara müdahele etmemize izin verir.

Masonry Grid Kullanımına bakacak olursak :

İlk önce sitemize

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

dosyasını entegre ediyoruz, sonra <script> taglarımızı açarak

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 20
});

bu kodu sayfamıza ekliyoruz. ilk önce yukardaki kodu bir inceleyelim.

.grid = masonry grid divimizi belirtiğimiz {class} bu isteğe bağlı #id# olarak da değiştirebilir.
itemSelector = masonry grid içinde bulunan hangi itemin masonry özelliğini alacağını belirtiyoruz tabi buda isteğe bağlı #id# olarak isimlendirilebilir.
.columnWidth = masonry grid içindeki masonry elementlerin genişliliklerini buradan düzenleyebilirsiniz.
gutter = bu özellik ise masonry grid içindeki elemenlerin birbirleriyle arasındaki mesafelerin kaç (px) olacağını belirtir.

Bundan sonraki işler tamamen css & html’e kalıyor. masonry grid içindeki itemleri css & html ile şekillendirerek istediğiniz görünümü elde edebilirsiniz.


Bu proje ile ilgili örnek dosyaları  indirmek için tıklayın.

+ Bu Yazı Hakkında Görüşlerin

Yorum Ekle