docs: update content

Author: mrholek

docs/content/4.0/layout/css-grid.md

@@ -22,7 +22,7 @@ With Bootstrap 5, we've added the option to enable a separate grid system that's
 
 - **Replace `.col-*` classes with `.g-col-*` classes.** This is because our CSS Grid columns use the `grid-column` property instead of `width`.
 
-- **Columns and gutter sizes are set via CSS variables.** Set these on the parent `.grid` and customize however you want, inline or in a stylesheet, with `--bs-columns` and `--bs-gap`.
+- **Columns and gutter sizes are set via CSS variables.** Set these on the parent `.grid` and customize however you want, inline or in a stylesheet, with `--cui-columns` and `--cui-gap`.
 
 In the future, Bootstrap will likely shift to a hybrid solution as the `gap` property has achieved nearly full browser support for flexbox.
 
@@ -36,7 +36,7 @@ Compared to the default grid system:
 
 - As such, unlike `.row`s, `.grid`s have no negative margins and margin utilities cannot be used to change the grid gutters. Grid gaps are applied horizontally and vertically by default. See the [customizing section](#customizing) for more details.
 
-- Inline and custom styles should be viewed as replacements for modifier classes (e.g., `style="--bs-columns: 3;"` vs `class="row-cols-3"`).
+- Inline and custom styles should be viewed as replacements for modifier classes (e.g., `style="--cui-columns: 3;"` vs `class="row-cols-3"`).
 
 - Nesting works similarly, but may require you to reset your column counts on each instance of a nested `.grid`. See the [nesting section](#nesting) for details.
 
@@ -139,15 +139,15 @@ This behavior can be mixed with grid column classes.
 
 Similar to our default grid system, our CSS Grid allows for easy nesting of `.grid`s. However, unlike the default, this grid inherits changes in the rows, columns, and gaps. Consider the example below:
 
-- We override the default number of columns with a local CSS variable: `--bs-columns: 3`.
+- We override the default number of columns with a local CSS variable: `--cui-columns: 3`.
 - In the first auto-column, the column count is inherited and each column is one-third of the available width.
 - In the second auto-column, we've reset the column count on the nested `.grid` to 12 (our default).
 - The third auto-column has no nested content.
 
 In practice this allows for more complex and custom layouts when compared to our default grid system.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 3;">
+<div class="grid" style="--cui-columns: 3;">
   <div>
     First auto-column
     <div class="grid">
@@ -157,7 +157,7 @@ In practice this allows for more complex and custom layouts when compared to our
   </div>
   <div>
     Second auto-column
-    <div class="grid" style="--bs-columns: 12;">
+    <div class="grid" style="--cui-columns: 12;">
       <div class="g-col-6">6 of 12</div>
       <div class="g-col-4">4 of 12</div>
       <div class="g-col-2">2 of 12</div>
@@ -174,19 +174,19 @@ Customize the number of columns, the number of rows, and the width of the gaps w
 {{< bs-table "table" >}}
 | Variable | Fallback value | Description |
 | --- | --- | --- |
-| `--bs-rows` | `1` | The number of rows in your grid template |
-| `--bs-columns` | `12` | The number of columns in your grid template |
-| `--bs-gap` | `1.5rem` | The size of the gap between columns (vertical and horizontal) |
+| `--cui-rows` | `1` | The number of rows in your grid template |
+| `--cui-columns` | `12` | The number of columns in your grid template |
+| `--cui-gap` | `1.5rem` | The size of the gap between columns (vertical and horizontal) |
 {{< /bs-table >}}
 
-These CSS variables have no default value; instead, they apply fallback values that are used _until_ a local instance is provided. For example, we use `var(--bs-rows, 1)` for our CSS Grid rows, which ignores `--bs-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`.
+These CSS variables have no default value; instead, they apply fallback values that are used _until_ a local instance is provided. For example, we use `var(--cui-rows, 1)` for our CSS Grid rows, which ignores `--cui-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`.
 
 ### No grid classes
 
 Immediate children elements of `.grid` are grid items, so they'll be sized without explicitly adding a `.g-col` class.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 3;">
+<div class="grid" style="--cui-columns: 3;">
   <div>Auto-column</div>
   <div>Auto-column</div>
   <div>Auto-column</div>
@@ -198,14 +198,14 @@ Immediate children elements of `.grid` are grid items, so they'll be sized witho
 Adjust the number of columns and the gap.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
+<div class="grid" style="--cui-columns: 4; --cui-gap: 5rem;">
   <div class="g-col-2">.g-col-2</div>
   <div class="g-col-2">.g-col-2</div>
 </div>
 {{< /example >}}
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
+<div class="grid" style="--cui-columns: 10; --cui-gap: 1rem;">
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-4">.g-col-4</div>
 </div>
@@ -216,7 +216,7 @@ Adjust the number of columns and the gap.
 Adding more rows and changing the placement of columns:
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
+<div class="grid" style="--cui-rows: 3; --cui-columns: 3;">
   <div>Auto-column</div>
   <div class="g-start-2" style="grid-row: 2">Auto-column</div>
   <div class="g-start-3" style="grid-row: 3">Auto-column</div>
@@ -237,10 +237,10 @@ Change the vertical gaps only by modifying the `row-gap`. Note that we use `gap`
 </div>
 {{< /example >}}
 
-Because of that, you can have different vertical and horizontal `gap`s, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for `gap`, or with our `--bs-gap` CSS variable.
+Because of that, you can have different vertical and horizontal `gap`s, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for `gap`, or with our `--cui-gap` CSS variable.
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-gap: .25rem 1rem;">
+<div class="grid" style="--cui-gap: .25rem 1rem;">
   <div class="g-col-6">.g-col-6</div>
   <div class="g-col-6">.g-col-6</div>
 
@@ -259,7 +259,7 @@ One limitation of the CSS Grid is that our default classes are still generated b
 For example, you can increase the column count and change the gap size, and then size your "columns" with a mix of inline styles and predefined CSS Grid column classes (e.g., `.g-col-4`).
 
 {{< example class="bd-example-cssgrid" >}}
-<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
+<div class="grid" style="--cui-columns: 18; --cui-gap: .5rem;">
   <div style="grid-column: span 14;">14 columns</div>
   <div class="g-col-4">.g-col-4</div>
 </div>