initial masonry view mode

src/assets/scss/_view-mode-masonry.scss

@@ -0,0 +1,22 @@
+.tainacan-masonry-container {
+    padding: 0;
+    column-gap: 20px;
+    column-count: 1;
+   
+    @media only screen and (min-width: 576px) {
+        column-count: 2;
+    }
+    @media only screen and (min-width: 768px) {
+        column-count: 3;
+    }
+    @media only screen and (min-width: 992px) {
+        column-count: 4;
+    }
+    .card{
+        border: none;
+        img{
+            width: 100%;
+            height: auto;
+        }
+    }
+}

src/assets/scss/style.scss

@@ -204,4 +204,6 @@ form{
 
 @import "_view-mode-grid.scss";
 
-@import "_view-mode-mosaic.scss";
+@import "_view-mode-mosaic.scss";
+
+@import "_view-mode-masonry.scss";

src/functions.php

@@ -72,6 +72,12 @@ if(!function_exists('tainacan_setup')) {
                 'icon' => '<span class="icon"><i class="mdi mdi-view-quilt mdi-24px"></i></span>',
                 'dynamic_metadata' => false,
             ]);
+            tainacan_register_view_mode('masonry', [
+                'label' => 'Masonry view',
+                'description' => 'A masonry view',
+                'icon' => '<span class="icon"><i class="mdi mdi-account mdi-24px"></i></span>',
+                'dynamic_metadata' => false,
+            ]);
         }
 
     }

src/tainacan/view-mode-masonry.php

@@ -0,0 +1,12 @@
+<?php if (have_posts()):  ?>
+    <div class="tainacan-masonry-container card-columns p-3">
+        <?php while (have_posts()): the_post(); ?>
+                <div class="card">
+                    <?php the_post_thumbnail('large'); ?>
+                    <div class="card-body">
+                        <h5 class="card-title"><?php the_title(); ?></h5>
+                    </div>
+                </div>      
+        <?php endwhile; ?>
+    </div>
+<?php endif; ?>