From 5b310ccc76bf576aba43fe73a21d5e9997744ca4 Mon Sep 17 00:00:00 2001
From: Erin Schnabel <erinschnabel@gmail.com>
Date: Mon, 23 Dec 2024 14:53:11 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20use=20grid=20instead=20of=20flex?=
 =?UTF-8?q?box=20for=20split.=20Resolves=20#78?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/scss/layout/_split.scss          | 60 ++++++++++------------------
 src/scss/layout/slides-extended.scss |  2 +-
 2 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/src/scss/layout/_split.scss b/src/scss/layout/_split.scss
index bf657d7..39e9e73 100644
--- a/src/scss/layout/_split.scss
+++ b/src/scss/layout/_split.scss
@@ -1,55 +1,37 @@
 :root {
 	--split-div-size: 0;
-	--split-gap-size: 0;
-}
-
-split {
-    display: flex;
-    gap: unset;
-    flex-flow: row wrap;
-    align-content: center;
-}
-
-split[even]>* {
-    flex: 1
+	--split-gap-size: unset;
 }
 
 split[no-margin]>* {
 	--r-block-margin: 0;
 }
 
-@for $i from 1 through 12 {
-	split[wrap="#{$i}"]>* {
-		flex: 1 1 calc((100% - (calc(var(--split-gap-size) * (#{$i} - 1))) - (calc(var(--dbg-size) * #{$i} * 2))) / #{$i});
-	}
-}
-
-split[gap="0"] {
-	--split-gap-size: 0;
-    gap: unset;
-}
-
-@for $i from 1 through 5 {
+@for $i from 0 through 5 {
     split[gap="#{$i}"] {
 		--split-gap-size: #{$i}em;
-        gap: #{$i}em;
     }
 }
 
-@for $i from 1 through 11 {
-	split[left="#{$i}"]>*:first-child {
-		flex: #{$i};
-	}
-
-	split[middle="#{$i}"]>*:nth-child(2) {
-		flex: #{$i}!important;
-	}
+split[even]:not([wrap])>* {
+    display: flex;
+    flex-flow: row wrap;
+    align-content: center;
+    gap: var(--split-gap-size);
+    grid-gap: unset;
+}
+split[wrap]:not([even]) {
+    display: grid;
+    gap: unset;
+    grid-gap: var(--split-gap-size);
 
-	split[right="#{$i}"]>*:nth-child(2) {
-		flex: #{$i};
-	}
+    >* {
+        margin: auto;
+    }
+}
 
-	split[right="#{$i}"]>*:nth-child(3) {
-		flex: #{$i};
-	}
+@for $i from 1 through 12 {
+    split[wrap="#{$i}"] {
+        grid-template-columns: repeat(#{$i}, 1fr);
+    }
 }
diff --git a/src/scss/layout/slides-extended.scss b/src/scss/layout/slides-extended.scss
index 69d74d0..4d6ada2 100644
--- a/src/scss/layout/slides-extended.scss
+++ b/src/scss/layout/slides-extended.scss
@@ -7,7 +7,7 @@
 @import '_tables.scss';
 
 :root {
-	--dbg-size: 0;
+	--dbg-size: 1;
 }
 
 .dbg,