From 717396e7e76be32610674a3d98ee105a656d8f8f Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 25 Jan 2023 15:13:51 +0100
Subject: [PATCH] Added a grid-group component.

---
 .../components/grid-group/_grid-group.scss    | 48 +++++++++++++++++++
 assets/sass/styles.scss                       |  1 +
 2 files changed, 49 insertions(+)
 create mode 100644 assets/sass/components/grid-group/_grid-group.scss

diff --git a/assets/sass/components/grid-group/_grid-group.scss b/assets/sass/components/grid-group/_grid-group.scss
new file mode 100644
index 0000000..c8b6a20
--- /dev/null
+++ b/assets/sass/components/grid-group/_grid-group.scss
@@ -0,0 +1,48 @@
+.grid-group,
+%grid-group {
+  --column-min: 250px;
+  $gap: 1;
+  @include gap($gap);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr));
+
+  &--fit {
+    grid-template-columns: repeat(auto-fit, minmax(var(--column-min), 1fr));
+  }
+
+  &--100 {
+    --column-min: 100px;
+  }
+
+  &--150 {
+    --column-min: 150px;
+  }
+
+  &--200 {
+    --column-min: 200px;
+  }
+
+  &--250 {
+    --column-min: 250px;
+  }
+
+  &--300 {
+    --column-min: 300px;
+  }
+
+  &--350 {
+    --column-min: 350px;
+  }
+
+  &--400 {
+    --column-min: 400px;
+  }
+
+  &--500 {
+    --column-min: 500px;
+  }
+
+  &--600 {
+    --column-min: 600px;
+  }
+}
diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
index 98e0827..5c46dd3 100644
--- a/assets/sass/styles.scss
+++ b/assets/sass/styles.scss
@@ -36,6 +36,7 @@
 @import 'components/disabled/disabled';
 @import 'components/flex-group/flex-group';
 @import 'components/flex-inline/flex-inline';
+@import 'components/grid-group/grid-group';
 @import 'components/header/header';
 @import 'components/hidden/hidden';
 @import 'components/highlight-mark/highlight-mark';