🔧 chore(grid.scss): Fix grid row support, grid rows will now have a m…

…ax of 6
Spiderpig86 · Aug 5, 2023 · 74cdab9 · 74cdab9
1 parent c60a237
commit 74cdab9
Show file tree

Hide file tree

Showing 8 changed files with 1,407 additions and 2,060 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
diff --git a/dist/cirrus-all.min.css b/dist/cirrus-all.min.css
diff --git a/dist/cirrus-core.css b/dist/cirrus-core.css
diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/base/grid.scss b/src/base/grid.scss
@@ -6,6 +6,7 @@
 
 :root {
     --grid-template-column: repeat(#{$grid-columns}, minmax(0, 1fr));
+    --grid-template-rows: repeat(#{$grid-rows}, minmax(0, 1fr));
     --grid-column-start: auto;
     --grid-column-end: auto;
     --grid-row-start: auto;
@@ -32,18 +33,25 @@
             grid-column: span #{$i} / span #{$i};
         }
 
-        /* Row expansion */
-        .grid-r-#{$i}#{$suffix} {
-            grid-row: span #{$i} / span #{$i};
-        }
-
         /* Cell Column Start/End */
         .grid-cs-#{$i}#{$suffix} {
             grid-column-start: #{$i};
         }
         .grid-ce-#{$i}#{$suffix} {
             grid-column-end: #{$i + 1};
         }
+    }
+
+    @for $i from 1 through $grid-rows {
+        /* Templates */
+        .grid-rows-#{$i}#{$suffix} {
+            --grid-template-column: repeat(#{$i}, minmax(0, 1fr));
+        }
+
+        /* Row expansion */
+        .grid-r-#{$i}#{$suffix} {
+            grid-row: span #{$i} / span #{$i};
+        }
 
         /* Cell Row Start/End */
         .grid-rs-#{$i}#{$suffix} {

diff --git a/src/internal/_config.scss b/src/internal/_config.scss
@@ -698,6 +698,7 @@ $default-config: (
         properties: (
             default-grid-gap: 2,
             grid-columns: 12,
+            grid-rows: 6,
         ),
     ),
     heights:
@@ -902,6 +903,7 @@ $flex-width: math.div(1, $flex-columns);
 
 $grid-properties: functions.get-with-extend($all-config, grid, properties);
 $grid-columns: map.get($grid-properties, grid-columns);
+$grid-rows: map.get($grid-properties, grid-rows);
 $default-grid-gap: map.get($grid-properties, default-grid-gap);
 
 $opacities: functions.get-with-extend($all-config, opacity);