Add a content-grid shortcode that creates a grid of n columns inside a <div>

assets/css/010_spacing.css

@@ -67,6 +67,7 @@ hr {
       "blockquote"
       "table"
       ".codeblock"
+      ".content-grid"
       ".figure"
       ".highlight"
       ".instagram-media"

assets/css/050_figures.css

@@ -92,3 +92,8 @@ figcaption {
   grid-column: main-start / main-end;
   letter-spacing: 0.01em;
 }
+
+
+.content-grid > .figure {
+  grid-column: unset;
+}

assets/css/090_content_grid.css

@@ -0,0 +1,13 @@
+
+
+
+
+
+/***************
+ * CONTENT GRID
+ ***************/
+
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--columns), 1fr);
+}

layouts/shortcodes/content-grid.html

@@ -0,0 +1,4 @@
+{{- $columns := .Get "columns" -}}
+<div class="content-grid" style="--columns: {{ $columns }};">
+  {{ .Inner }}
+</div>