From 4a5dc3a3187b743ca596e342fa6dee08c528d2e1 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Tue, 26 Nov 2024 08:37:58 -0700
Subject: [PATCH] Add a content-grid shortcode that creates a grid of n columns
 inside a <div>

---
 assets/css/010_spacing.css           |  1 +
 assets/css/050_figures.css           |  5 +++++
 assets/css/090_content_grid.css      | 13 +++++++++++++
 layouts/shortcodes/content-grid.html |  4 ++++
 4 files changed, 23 insertions(+)
 create mode 100644 assets/css/090_content_grid.css
 create mode 100644 layouts/shortcodes/content-grid.html

diff --git a/assets/css/010_spacing.css b/assets/css/010_spacing.css
index 9680333..3b733f5 100644
--- a/assets/css/010_spacing.css
+++ b/assets/css/010_spacing.css
@@ -67,6 +67,7 @@ hr {
       "blockquote"
       "table"
       ".codeblock"
+      ".content-grid"
       ".figure"
       ".highlight"
       ".instagram-media"
diff --git a/assets/css/050_figures.css b/assets/css/050_figures.css
index 971836c..4048df2 100644
--- a/assets/css/050_figures.css
+++ b/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;
+}
diff --git a/assets/css/090_content_grid.css b/assets/css/090_content_grid.css
new file mode 100644
index 0000000..de17535
--- /dev/null
+++ b/assets/css/090_content_grid.css
@@ -0,0 +1,13 @@
+
+
+
+
+
+/***************
+ * CONTENT GRID
+ ***************/
+
+.content-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--columns), 1fr);
+}
diff --git a/layouts/shortcodes/content-grid.html b/layouts/shortcodes/content-grid.html
new file mode 100644
index 0000000..72c413b
--- /dev/null
+++ b/layouts/shortcodes/content-grid.html
@@ -0,0 +1,4 @@
+{{- $columns := .Get "columns" -}}
+<div class="content-grid" style="--columns: {{ $columns }};">
+  {{ .Inner }}
+</div>