assets/scss/snap-gallery.scss

@@ -1,21 +1,22 @@
 .snap-wrapper {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
+  justify-content: center;
   gap: 10px;
-}
 
-/* Create equal columns in flexbox */
-.snap-image {
-  // TODO: Make this configurable with variables
-  width: calc(100% / 4 - 10px);
-  min-width: 200px;
+  /* Create equal columns in flexbox */
+  .snap-image {
+
+    /* Column amount and width are configurable by style variables */
+    width: calc(100% / var(--columns) - 10px);
+    min-width: var(--min-width);
 
     img {
       aspect-ratio: 16/10;
       width: 100%;
       object-fit: cover;
     }
+  }
 }
 
 .snap-lightbox {

layouts/shortcodes/snap-gallery.html

@@ -20,7 +20,7 @@
 {{ end }}
 
 {{/*  Visible images  */}}
-<div class="snap-wrapper">
+<div class="snap-wrapper" style="--columns:{{ default 4 .Params.columns }};--min-width:{{ default 200 .Params.minwidth }};">
 {{ range $i, $img := $imgs }}
   <div class="snap-image">
     <img src="{{ $img }}" onclick="openModal({{ $galno }});currentSlide({{ $galno }}, {{ add $i 1 }});" class="hover-shadow">