Web tasarımında Pinterest gibi gridlerle çalışmak işimizi oldukça kolaylaştırmaktadır. Bu işleri genellikle eklentiler ile veya geliştiricilerin ücretsiz kullanıma sundukları öğreticiler ile (genelde jQuery ) ile grid oluşturmak her zaman oldukça basittir. Bununla birlikte, duvar ızgaraları, sayfaya eşit şekilde sığmadığı için responsive oluşturmak daha zordur. Sütunlar için sabit genişlikler olabilmekte fakat yükseklikleri değişebilir olmaktadır.
Birçok tasarımcı Pinterest’i grid ızgara tasarımları ile bilir. Pinterest popüler olmaya başladı ve web site tasarımlarında çok fazla kullanılmaya başlandı.
Mükemmel bir duvar ızgarası yapmak için Bricks.js gibi bir eklentiye ihtiyacınız var. Bu eklenti tamamen açık kaynak ve hızlıdır. Sayfadaki onlarca öğeyi ızgarayı yarım saniyeden daha kısa bir sürede oluşturabilirsiniz. Bricks.js ile çalışmaya başlamanız için bazı içeriğe ve varsayılan sayfa düzenine sahip olmanız gerekir. Bu eklentiyi NPM'den veya GitHub’dan kurarsanız bu daha kolay yapabilirsiniz.
İlk kurulumda üç özel parametreyi geçersiniz:
- Container – grid için Dom container bileşeni
- Packed – grid sistemde öğelerin nasıl akacağını belirleyen bir özellik
- Sizes – piksel cinsinden tanımlanmış genişlik ve oluk dizisi
Eklenti, duvar ızgarasını sıfırdan otomatik hale getirmek için tüm bu değerleri kullanır. Pinterest gibi çalışan duvar ızgaraları isterseniz sonsuz yükleme için kullanabilirsiniz.
Bricks.js eklentisini denemek için demo sayfasını inceleyin. Toplam öğe sayısını tanımlarsınız ve toplam işleme süresi görüntülenirken işlemi otomatikleştirir. İlgili dosyaları GitHub‘dan indirip kurulum talimatlarını izleyerek kendiniz uygulayabilirsiniz. Başta karışık gibi gelebilir fakat biraz kurcaladığınızda bu eklentiyi yapabilirsiniz.
Umarım faydalı olmuştur. Görüş ve önerilerinizi yorum bölümünde bekliyorum.
