diff --git a/src/MudBlazor.Docs/Pages/Components/Grid/Examples/GridSpacingExample.razor b/src/MudBlazor.Docs/Pages/Components/Grid/Examples/GridSpacingExample.razor
index 9d09ca8cda9..6bb94732d2f 100644
--- a/src/MudBlazor.Docs/Pages/Components/Grid/Examples/GridSpacingExample.razor
+++ b/src/MudBlazor.Docs/Pages/Components/Grid/Examples/GridSpacingExample.razor
@@ -1,6 +1,6 @@
@namespace MudBlazor.Docs.Examples
-Spacing: @spacing.ToString()
+Spacing: @spacing.ToString()
diff --git a/src/MudBlazor/Components/Grid/MudGrid.razor.cs b/src/MudBlazor/Components/Grid/MudGrid.razor.cs
index 40f9fe6c00b..19c060adee9 100644
--- a/src/MudBlazor/Components/Grid/MudGrid.razor.cs
+++ b/src/MudBlazor/Components/Grid/MudGrid.razor.cs
@@ -12,13 +12,15 @@ public partial class MudGrid : MudComponentBase
{
protected string Classname =>
new CssBuilder("mud-grid")
- .AddClass($"mud-grid-spacing-xs-{Spacing.ToString()}")
+ .AddClass($"gap-{Spacing}")
.AddClass($"justify-{Justify.ToDescriptionString()}")
.AddClass(Class)
.Build();
///
- /// Defines the spacing between its items.
+ /// The gap between items, measured in increments of 4px.
+ ///
+ /// Maximum is 16.
///
[Parameter]
[Category(CategoryTypes.Grid.Behavior)]
diff --git a/src/MudBlazor/Styles/components/_grid.scss b/src/MudBlazor/Styles/components/_grid.scss
index 172e1872f71..0615c340053 100644
--- a/src/MudBlazor/Styles/components/_grid.scss
+++ b/src/MudBlazor/Styles/components/_grid.scss
@@ -17,96 +17,6 @@
box-sizing: border-box;
}
-.mud-grid-spacing-xs-1 {
- width: calc(100% + 8px);
- margin: -4px;
-}
-
-.mud-grid-spacing-xs-1 > .mud-grid-item {
- padding: 4px;
-}
-
-.mud-grid-spacing-xs-2 {
- width: calc(100% + 16px);
- margin: -8px;
-}
-
-.mud-grid-spacing-xs-2 > .mud-grid-item {
- padding: 8px;
-}
-
-.mud-grid-spacing-xs-3 {
- width: calc(100% + 24px);
- margin: -12px;
-}
-
-.mud-grid-spacing-xs-3 > .mud-grid-item {
- padding: 12px;
-}
-
-.mud-grid-spacing-xs-4 {
- width: calc(100% + 32px);
- margin: -16px;
-}
-
-.mud-grid-spacing-xs-4 > .mud-grid-item {
- padding: 16px;
-}
-
-.mud-grid-spacing-xs-5 {
- width: calc(100% + 40px);
- margin: -20px;
-}
-
-.mud-grid-spacing-xs-5 > .mud-grid-item {
- padding: 20px;
-}
-
-.mud-grid-spacing-xs-6 {
- width: calc(100% + 48px);
- margin: -24px;
-}
-
-.mud-grid-spacing-xs-6 > .mud-grid-item {
- padding: 24px;
-}
-
-.mud-grid-spacing-xs-7 {
- width: calc(100% + 56px);
- margin: -28px;
-}
-
-.mud-grid-spacing-xs-7 > .mud-grid-item {
- padding: 28px;
-}
-
-.mud-grid-spacing-xs-8 {
- width: calc(100% + 64px);
- margin: -32px;
-}
-
-.mud-grid-spacing-xs-8 > .mud-grid-item {
- padding: 32px;
-}
-
-.mud-grid-spacing-xs-9 {
- width: calc(100% + 72px);
- margin: -36px;
-}
-
-.mud-grid-spacing-xs-9 > .mud-grid-item {
- padding: 36px;
-}
-
-.mud-grid-spacing-xs-10 {
- width: calc(100% + 80px);
- margin: -40px;
-}
-
-.mud-grid-spacing-xs-10 > .mud-grid-item {
- padding: 40px;
-}
-
.mud-grid-item-xs-auto {
flex-grow: 0;
max-width: none;