diff --git a/exampleSite/content/docs/shortcodes/index.md b/exampleSite/content/docs/shortcodes/index.md
index 511e77dc..1483aace 100644
--- a/exampleSite/content/docs/shortcodes/index.md
+++ b/exampleSite/content/docs/shortcodes/index.md
@@ -167,6 +167,26 @@ Blowfish also supports automatic conversion of images included using standard Ma
 
 {{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
 
+## Gallery
+
+`gallery` allows you to showcase multiple images at once, in a responsive manner with more varied and interesting layouts.
+
+In order to add images to the gallery, proceed as you normally would with `{{< figure >}}` shortcodes, but made sure to add the extra `class="grid-item grid-wXY"` in order for the gallery to properly pick the images up. The widths available by default start at 10% and go all the way to 100% in 5% increments. For example, to set the width to 65%, set the class to `grid-w65`.
+
+**Example:**
+
+```md
+{{</* gallery */>}}
+  {{</* figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" class="grid-item grid-w15"*/>}}
+  {{</* figure src="featured.png" class="grid-item grid-w15"*/>}}
+{{</* /gallery */>}}
+```
+
+{{< gallery >}}
+  {{< figure src="abstract.jpg" alt="Abstract purple artwork" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" class="grid-item grid-w75">}}
+  {{< figure src="featured.png" class="grid-item grid-w15" >}}
+{{< /gallery >}}
+
 ## Icon
 
 `icon` outputs an SVG icon and takes the icon name as its only parameter. The icon is scaled to match the current text size.
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html
new file mode 100644
index 00000000..2954e35a
--- /dev/null
+++ b/layouts/shortcodes/gallery.html
@@ -0,0 +1,36 @@
+<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
+
+<div class="grid">
+  {{ .Inner }}
+</div>
+
+<style>
+.grid-w10 { width: 10%;}
+.grid-w15 { width: 15%;}
+.grid-w20 { width: 20%;}
+.grid-w25 { width: 25%;}
+.grid-w30 { width: 30%;}
+.grid-w35 { width: 35%;}
+.grid-w40 { width: 40%;}
+.grid-w45 { width: 45%;}
+.grid-w50 { width: 50%;}
+.grid-w55 { width: 55%;}
+.grid-w60 { width: 60%;}
+.grid-w65 { width: 65%;}
+.grid-w70 { width: 70%;}
+.grid-w75 { width: 75%;}
+.grid-w80 { width: 80%;}
+.grid-w85 { width: 85%;}
+.grid-w90 { width: 90%;}
+.grid-w95 { width: 95%;}
+.grid-w100 { width: 100%;}
+</style>
+
+<script>
+var elem = document.querySelector('.grid');
+var pckry = new Packery( elem, {
+  // options
+  itemSelector: '.grid-item',
+  gutter: 10
+});
+</script>
\ No newline at end of file