Add .grid helper

wntrblm · Feb 27, 2024 · 429689e · 429689e
1 parent d6240e2
commit 429689e
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/dist/winter.css b/dist/winter.css
diff --git a/dist/winter.css.map b/dist/winter.css.map
diff --git a/src/styles/layout.css b/src/styles/layout.css
@@ -19,3 +19,37 @@ body {
         margin-left: auto;
     }
 }
+
+.grid {
+    display: grid;
+    --min: 15ch;
+    --gap: 1rem;
+
+    display: grid;
+    grid-gap: var(--gap);
+    /* min() with 100% prevents overflow in extra narrow spaces */
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
+
+    &.col-2 {
+        grid-template-columns: 1fr 1fr;
+    }
+    &.col-3 {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    &.col-4 {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    &.col-1-2 {
+        grid-template-columns: 1fr 2fr;
+    }
+    &.col-2-1 {
+        grid-template-columns: 2fr 1fr;
+    }
+    &.col-1-3 {
+        grid-template-columns: 1fr 3fr;
+    }
+    &.col-3-1 {
+        grid-template-columns: 3fr 1fr;
+    }
+}