✨ feat(grid.scss): Add new utility classes for grid auto flow row and…

… column
Spiderpig86 · Dec 26, 2023 · f0349a1 · f0349a1
1 parent 95bb80b
commit f0349a1
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 3 deletions.
diff --git a/dist/cirrus-all.css b/dist/cirrus-all.css
@@ -1159,6 +1159,14 @@ blockquote {
   grid-template-columns: var(--grid-template-column);
 }
 
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 /* Templates */
 .grid-cols-1 {
   --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1523,6 +1531,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-sm {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-sm {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-sm {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1812,6 +1826,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-md {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-md {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-md {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -2101,6 +2121,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-lg {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-lg {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-lg {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -2390,6 +2416,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-xl {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-xl {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-xl {
     --grid-template-column: repeat(1, minmax(0, 1fr));

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
@@ -898,6 +898,14 @@ blockquote {
   grid-template-columns: var(--grid-template-column);
 }
 
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 /* Templates */
 .grid-cols-1 {
   --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1262,6 +1270,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-sm {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-sm {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-sm {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1551,6 +1565,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-md {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-md {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-md {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1840,6 +1860,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-lg {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-lg {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-lg {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -2129,6 +2155,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-xl {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-xl {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-xl {
     --grid-template-column: repeat(1, minmax(0, 1fr));

diff --git a/dist/cirrus-core.min.css b/dist/cirrus-core.min.css
diff --git a/dist/cirrus.css b/dist/cirrus.css
@@ -899,6 +899,14 @@ blockquote {
   grid-template-columns: var(--grid-template-column);
 }
 
+.grid-flow-row {
+  grid-auto-flow: row;
+}
+
+.grid-flow-col {
+  grid-auto-flow: column;
+}
+
 /* Templates */
 .grid-cols-1 {
   --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1263,6 +1271,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-sm {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-sm {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-sm {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1552,6 +1566,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-md {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-md {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-md {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -1841,6 +1861,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-lg {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-lg {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-lg {
     --grid-template-column: repeat(1, minmax(0, 1fr));
@@ -2130,6 +2156,12 @@ blockquote {
     grid-gap: var(--grid-gap);
     grid-template-columns: var(--grid-template-column);
   }
+  .grid-flow-row-xl {
+    grid-auto-flow: row;
+  }
+  .grid-flow-col-xl {
+    grid-auto-flow: column;
+  }
   /* Templates */
   .grid-cols-1-xl {
     --grid-template-column: repeat(1, minmax(0, 1fr));

diff --git a/dist/cirrus.min.css b/dist/cirrus.min.css
diff --git a/src/base/grid.scss b/src/base/grid.scss
@@ -22,6 +22,14 @@
         grid-template-columns: var(--grid-template-column);
     }
 
+    .grid-flow-row#{$suffix} {
+        grid-auto-flow: row;
+    }
+
+    .grid-flow-col#{$suffix} {
+        grid-auto-flow: column;
+    }
+
     @for $i from 1 through $grid-columns {
         /* Templates */
         .grid-cols-#{$i}#{$suffix} {