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>