diff --git a/packages/documentation/src/stories/foundations/layout/columns/columns.styles.scss b/packages/documentation/src/stories/foundations/layout/columns/columns.styles.scss
index 0ca6b8aa18..0b31c3a0e6 100644
--- a/packages/documentation/src/stories/foundations/layout/columns/columns.styles.scss
+++ b/packages/documentation/src/stories/foundations/layout/columns/columns.styles.scss
@@ -13,11 +13,7 @@
background-color: lighten(#0076a8, 61.5%);
}
- .row-height {
+ .high-row .row {
min-height: 10rem;
}
-
- .standalone-columns > *:not(p){
- padding-block: 0.75rem;
- }
}
diff --git a/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx
index 4c3ef138b8..e1911e644e 100644
--- a/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx
+++ b/packages/documentation/src/stories/foundations/layout/grid/grid.docs.mdx
@@ -1,10 +1,11 @@
import { Canvas, Meta, Source } from '@storybook/blocks';
-import { formatAsMap } from '@/utils/sass-export';
-import { GridTable, SCSS_VARIABLES } from './grid.blocks';
+import { parse } from '@/utils/sass-export';
+import scss from './grid.module.scss';
import * as GridStories from './grid.stories';
import './grid.styles.scss';
import SampleContainer from './grid-container.sample.html?raw';
-import SampleScssMixins from './grid-scss-mixins.sample.scss?raw';
+
+export const SCSS_VARIABLES = parse(scss);
@@ -47,13 +48,6 @@ Breaking it down, here’s how the grid system comes together:
- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
- **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes, you can use the grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
-## Grid options
-
-Our grid system can adapt across all {SCSS_VARIABLES['breakpoint-count']} breakpoints.
-Each of these breakpoints have their own specifications, a unique class prefix, and some modifiers.
-
-
-
## Auto-layout columns
Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like `.col-sm-6`.
@@ -119,25 +113,3 @@ To nest your content with the default grid, add a new `.row` and set of `.col-*`
Note: the style in this example is applied to the column to visually better understand nesting. However, it's recommended to apply the style on a child element of the column.
-
-## CSS
-
-When using our source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.
-
-### Sass variables
-
-Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
-
- `$${key}: ${formatAsMap(value)};`)
- .join('\n')}
->
-
-### Sass mixins
-
-Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
-
-
diff --git a/packages/documentation/src/stories/foundations/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundations/layout/grid/grid.stories.ts
index c930e97aef..0826654e2a 100644
--- a/packages/documentation/src/stories/foundations/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundations/layout/grid/grid.stories.ts
@@ -25,15 +25,9 @@ export const Basis: Story = {
render: () => html`