Initial version

themes/zen/assets/sass/components/grid-group/_grid-group.scss

@@ -0,0 +1,52 @@
+.grid-group,
+%grid-group {
+  --column-min: 200px;
+  --gap: 1.5rem;
+
+  display: grid;
+  gap: var(--gap);
+  // Writing "Min" instead of "min" to force use of css "min()" instead of sass "min()".
+  // stylelint-disable-next-line function-name-case
+  grid-template-columns: repeat(auto-fit, minmax(Min(var(--column-min), 100%), 1fr));
+
+  &--fill {
+    // stylelint-disable-next-line function-name-case
+    grid-template-columns: repeat(auto-fill, minmax(Min(var(--column-min), 100%), 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;
+  }
+}