Clean up a couple CSS Grid issues (#34572)

- Moves the make-cssgrid() mixin to the grid mixins stylesheet
- Updates the g-start-* classes to start at 1 instead of 0 as 0 is an invalid value (fixes #34399)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_grid.scss b/scss/_grid.scss
index 13f21a3ff76e9324efc6fffce05a85749054e600..27fd5584720f7331e2d2cc988740360139744af3 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -12,29 +12,6 @@
   }
 }
 
-@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .g-col#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
-        }
-
-        // `$columns - 1` because offsetting by the width of an entire row isn't possible
-        @for $i from 0 through ($columns - 1) {
-          .g-start#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
-    }
-  }
-}
-
 @if $enable-cssgrid {
   .grid {
     display: grid;

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index ff6941c4641f9baaf68a4a1a991915ef3bc50b40..41760ef4eaa9a4b21e4faf5a18e7f5166e6498bc 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -130,3 +130,27 @@
     }
   }
 }
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is and invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .g-start#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}

diff --git a/site/content/docs/5.0/layout/css-grid.md b/site/content/docs/5.0/layout/css-grid.md
index e6165fc5618cb2d43fa607dadd202aa2a39136da..424167839dcdf19043d43837b34aa444ec90ce06 100644 (file)
--- a/site/content/docs/5.0/layout/css-grid.md
+++ b/site/content/docs/5.0/layout/css-grid.md
@@ -91,7 +91,7 @@ Grid items automatically wrap to the next line when there's no more room horizon
 
 ## Starts
 
-Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need.
+Start classes aim to replace our default grid's offset classes, but they're not entirely the same. CSS Grid creates a grid template through styles that tell browsers to "start at this column" and "end at this column." Those properties are `grid-column-start` and `grid-column-end`. Start classes are shorthand for the former. Pair them with the column classes to size and align your columns however you need. Start classes begin at `1` as `0` is an invalid value for these properties.
 
 {{< example class="bd-example-cssgrid" >}}
 <div class="grid">