masonry grid on home

assets/js/script.js

@@ -34,25 +34,29 @@ window.onload = async function () {
   scrollBack();   
   navInvestigation();  
 
-  var elem = document.querySelector('.grid-masonry');
+  var elems = document.querySelectorAll('.grid-masonry');
-  var msnry = null;
+  var msnries = [];
 
   function initMasonry() {
-    if (!elem) return;
+    if (!elems.length) return;
     if (window.innerWidth >= responsiveSmall) {
-      if (!msnry) {
+      elems.forEach(function(elem, i) {
-        msnry = new Masonry(elem, {
+        if (!msnries[i]) {
+          msnries[i] = new Masonry(elem, {
             itemSelector: '.card--block:not(.is-sort-hidden)',
             columnWidth: '.grid-sizer',
             percentPosition: true,
             gutter: 26
           });
         }
+      });
     } else {
+      msnries.forEach(function(msnry, i) {
         if (msnry) {
           msnry.destroy();
-        msnry = null;
+          msnries[i] = null;
         }
+      });
     }
   }
 
@@ -60,11 +64,13 @@ window.onload = async function () {
   window.addEventListener('resize', initMasonry);
 
   initSort(() => {
+    msnries.forEach(function(msnry) {
       if (msnry) {
         msnry.reloadItems();
         msnry.layout();
       }
     });
+  });
 
 
 

site/templates/home.php

@@ -185,7 +185,6 @@ $count = max(4, (int)$section->count()->value());
 
       <?php elseif ($type === 'packages'): ?>
 
-        <div class="container-cards">
           <?php foreach (page('packages')->children()->listed()->limit($count) as $package):
               $cover               = $package->cover()->toFile();
               $investigationsCount = $package->linkedContent()->toPages()->count();
@@ -223,7 +222,6 @@ $count = max(4, (int)$section->count()->value());
               <a class="link-block" href="<?= $package->url() ?>" aria-hidden="true"></a>
           </article>
           <?php endforeach ?>
-        </div>
 
           <?php elseif ($type === 'projects'): ?>