From 361c14a806eddf2034a52bb64f60e285a1bd1e6a Mon Sep 17 00:00:00 2001
From: ethanpil <ethan@piliavin.com>
Date: Thu, 17 Apr 2025 19:20:41 -0700
Subject: [PATCH] New: Variable grid columns without changing default
 functionality

See https://github.com/picocss/pico/discussions/582
---
 scss/layout/_grid.scss | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index 0f1fad44..ef3c058d 100644
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -18,9 +18,35 @@
         grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
       }
     }
-
+    
     & > * {
       min-width: 0; // HACK for children in overflow
     }
   }
+  .grid-2 {
+     grid-template-columns: repeat(2, 1fr);
+  }
+  .grid-3 {
+     grid-template-columns: repeat(3, 1fr);
+  }
+  .grid-4 {
+     grid-template-columns: repeat(4, 1fr);
+  }
+  .grid-5 {
+     grid-template-columns: repeat(5, 1fr);
+  }
+  .grid-6 {
+     grid-template-columns: repeat(6, 1fr);
+  }
+  .grid-8 {
+     grid-template-columns: repeat(8, 1fr);
+  }
+  @if map.get($breakpoints, "md") {
+    @media only screen and (max-width: map.get(map.get($breakpoints, "md"), "breakpoint")) {
+      .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-8 {
+         grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
+    
 }