Restore both grids , enable CSS grid by default, and update mixins (#41702)

* Restore both grids and update mixins

* Bundlewatch

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index f84415afeb15e0f5b785c79ccb845d59dfc1c90a..5464008276c0a59cc8f11e91042a4d6a87f8c320 100644 (file)
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/bootstrap-grid.css",
-      "maxSize": "6.5 kB"
+      "maxSize": "7.5 kB"
     },
     {
       "path": "./dist/css/bootstrap-grid.min.css",
-      "maxSize": "6.0 kB"
+      "maxSize": "6.75 kB"
     },
     {
       "path": "./dist/css/bootstrap-reboot.css",
@@ -26,7 +26,7 @@
     },
     {
       "path": "./dist/css/bootstrap.css",
-      "maxSize": "34.0 kB"
+      "maxSize": "35.75 kB"
     },
     {
       "path": "./dist/css/bootstrap.min.css",

diff --git a/scss/_config.scss b/scss/_config.scss
index ad98d20ff153b886677d69ed1296c568a65f51b2..7026075523a7ab8cbfb2ff7f4792e211b2a65720 100644 (file)
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -13,7 +13,7 @@ $enable-reduced-motion:       true !default;
 $enable-smooth-scroll:        true !default;
 $enable-grid-classes:         true !default;
 $enable-container-classes:    true !default;
-$enable-cssgrid:              false !default;
+$enable-cssgrid:              true !default;
 $enable-button-pointers:      true !default;
 $enable-rfs:                  true !default;
 $enable-validation-icons:     true !default;
@@ -31,6 +31,18 @@ $color-contrast-dark:      #000 !default;
 $color-contrast-light:     #fff !default;
 $min-contrast-ratio:         4.5 !default;
 
+// scss-docs-start spacer-variables-maps
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+) !default;
+// scss-docs-end spacer-variables-maps
+
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
@@ -55,6 +67,8 @@ $grid-columns: 12 !default;
 $grid-gutter-width: 1.5rem !default;
 $grid-row-columns: 6 !default;
 
+$gutters: $spacers !default;
+
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.

diff --git a/scss/layout/_grid.scss b/scss/layout/_grid.scss
index 1f58d1d38e5bc612cd7ad2c158289158bbff3975..df077a5c1f4d347adbffa72daab3f500c48d1206 100644 (file)
--- a/scss/layout/_grid.scss
+++ b/scss/layout/_grid.scss
@@ -1,14 +1,11 @@
 @use "sass:map";
 @use "../config" as *;
+@use "../mixins/grid" as *;
 @use "breakpoints" as *;
 
 // mdo-do
 // - check gap utilities as replacement for gutter classes from v5
 
-// Row
-//
-// Rows contain your columns.
-
 :root {
   @each $name, $value in $grid-breakpoints {
     --#{$prefix}breakpoint-#{$name}: #{$value};
@@ -16,41 +13,32 @@
 }
 
 @layer layout {
-  .grid {
-    --#{$prefix}columns: #{$grid-columns};
-    --#{$prefix}rows: 1;
-    --#{$prefix}gap: #{$grid-gutter-width};
+  @if $enable-grid-classes {
+    .row {
+      @include make-row();
 
-    display: grid;
-    grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
-    grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
-    gap: var(--#{$prefix}gap);
-  }
+      > * {
+        @include make-col-ready();
+      }
+    }
 
-  @each $breakpoint in map.keys($grid-breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    @include make-grid-columns();
+  }
 
-    @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
-      @if $grid-columns > 0 {
-        @for $i from 1 through $grid-columns {
-          .col#{$infix}-#{$i} {
-            grid-column: auto / span $i;
-          }
+  @if $enable-cssgrid {
+    .grid {
+      --#{$prefix}columns: #{$grid-columns};
+      --#{$prefix}rows: 1;
+      --#{$prefix}gap: #{$grid-gutter-width};
 
-          .end#{$infix}-#{$i} {
-            grid-column-end: $i;
-          }
-        }
+      display: grid;
+      grid-template-rows: repeat(var(--#{$prefix}rows), 1fr);
+      grid-template-columns: repeat(var(--#{$prefix}columns), 1fr);
+      gap: var(--#{$prefix}gap);
 
-        // Start with `1` because `0` is an invalid value.
-        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
-        @for $i from 1 through ($grid-columns - 1) {
-          .col-start#{$infix}-#{$i} {
-            grid-column-start: $i;
-          }
-        }
-      }
     }
+
+    @include make-cssgrid();
   }
 
   // mdo-do: add to utilities?

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index a11b8b8027ff4a2d17b37132789a695e899139bc..4f8da96a0d8e2dfeb7f40a4acafea9c5e863225a 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "../config" as *;
+@use "../layout/breakpoints" as *;
+
 // Grid system
 //
 // Generate semantic grid columns with these mixins.
@@ -15,7 +21,7 @@
 
 @mixin make-col-ready() {
   // Add box sizing if only the grid is loaded
-  box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
+  box-sizing: if(meta.variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null);
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we set the width
   // later on to override this initial width.
@@ -30,7 +36,7 @@
 @mixin make-col($size: false, $columns: $grid-columns) {
   @if $size {
     flex: 0 0 auto;
-    width: percentage(divide($size, $columns));
+    width: math.percentage(math.div($size, $columns));
 
   } @else {
     flex: 1 1 0;
@@ -44,8 +50,8 @@
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
+  $num: math.div($size, $columns);
+  margin-left: if($num == 0, 0, math.percentage($num));
 }
 
 // Row columns
@@ -56,7 +62,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: percentage(divide(1, $count));
+    width: math.percentage(math.div(1, $count));
   }
 }
 
@@ -66,7 +72,7 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
@@ -127,7 +133,7 @@
 }
 
 @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint in map-keys($breakpoints) {
+  @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {