[FluentGrid] Fix the Grid "external margins" (#1646)

* Fix the Grid margin

* Update Gap to Spacing

examples/Demo/Shared/Pages/Grid/Examples/GridDefault.razor

@@ -1,12 +1,16 @@
-<FluentSelect Items=@(Enum.GetValues<JustifyContent>())
-              OptionValue="@(c => c.ToAttributeValue())"
-              TOption="JustifyContent"
-              Position="SelectPosition.Below"
-              @bind-SelectedOption="@Justification" />
-<br />
-<br />
+<FluentStack Style="margin-bottom: 24px;" VerticalAlignment="VerticalAlignment.Center">
+    <FluentLabel>Justify</FluentLabel>
+    <FluentSelect Items=@(Enum.GetValues<JustifyContent>())
+                  OptionValue="@(c => c.ToAttributeValue())"
+                  TOption="JustifyContent"
+                  Position="SelectPosition.Below"
+                  @bind-SelectedOption="@Justification" />
 
-<FluentGrid Spacing="3" OnBreakpointEnter="@OnBreakpointEnterHandler" Justify="@Justification" Style="background-color: var(--neutral-layer-3);">
+    <FluentLabel>Spacing</FluentLabel>
+    <FluentSlider @bind-Value="@Spacing" Min="0" Max="10" Step="1" Style="max-width: 300px; margin-top: 18px;" />
+</FluentStack>
+
+<FluentGrid Spacing="@Spacing" OnBreakpointEnter="@OnBreakpointEnterHandler" Justify="@Justification" Style="background-color: var(--neutral-layer-3); padding: 4px; ">
     <FluentGridItem xs="12">
         <div class="card">
             xs="12"
@@ -52,10 +56,11 @@
 @code
 {
     JustifyContent Justification = JustifyContent.FlexStart;
+    int Spacing = 3;
 
     void OnBreakpointEnterHandler(GridItemSize size)
     {
         Console.WriteLine($"Page Size: {size}");
         DemoLogger.WriteLine($"Page Size: {size}");
     }
-}
+}

examples/Demo/Shared/Pages/Grid/Examples/GridMessage.razor

@@ -1,5 +1,5 @@
-<FluentGrid Justify="JustifyContent.FlexEnd"
-            Style="background-color: var(--neutral-layer-3); overflow: auto; resize: horizontal;">
+<FluentGrid Justify="JustifyContent.FlexEnd"
+            Style="background-color: var(--neutral-layer-3); overflow: hidden; resize: horizontal; padding: 4px;">
     <FluentGridItem Style="min-width: 200px;">
         <FluentLabel>
             Views must be setup in the Admin Portal to use this client application hosted by my company.
@@ -9,4 +9,4 @@
         <FluentButton Appearance="Appearance.Neutral">Setup</FluentButton>
         <FluentButton Appearance="Appearance.Neutral">Documentation</FluentButton>
     </FluentGridItem>
-</FluentGrid>
+</FluentGrid>

src/Core/Components/Grid/FluentGrid.razor

@@ -1,6 +1,8 @@
 @namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 
-<div id="@GetId()" class="@ClassValue" style="@StyleValue" spacing="@Spacing" @attributes="AdditionalAttributes">
-    @ChildContent
-</div>
+<div class="@ClassValue" style="@StyleValue" @attributes="AdditionalAttributes">
+    <div id="@GetId()" class="fluent-grid" style="@($"justify-content: {Justify.ToAttributeValue()};")" spacing="@Spacing">
+        @ChildContent
+    </div>
+</div>

src/Core/Components/Grid/FluentGrid.razor.cs

@@ -57,12 +57,10 @@ public FluentGrid()
 
     /// <summary />
     protected string? ClassValue => new CssBuilder(Class)
-        .AddClass($"fluent-grid")
         .Build();
 
     /// <summary />
     protected string? StyleValue => new StyleBuilder(Style)
-        .AddStyle("justify-content", Justify.ToAttributeValue())
         .Build();
 
     protected async override Task OnAfterRenderAsync(bool firstRender)

tests/Core/Grid/FluentGridTests.FluentGrid_Default.verified.razor.html

@@ -1,2 +1,4 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">My content</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">My content</div>
+</div>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_AllBreakpoints.verified.razor.html

@@ -1,4 +1,6 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div xs="1" sm="2" md="3" lg="4" xl="5" xxl="6">My cell</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div xs="1" sm="2" md="3" lg="4" xl="5" xxl="6">My cell</div>
+  </div>
 </div>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_Default.verified.razor.html

@@ -1,5 +1,7 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div xs="6" md="6">Cell 1</div>
-  <div xs="6" md="6">Cell 2</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div xs="6" md="6">Cell 1</div>
+    <div xs="6" md="6">Cell 2</div>
+  </div>
 </div>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_JustifyGap.verified.razor.html

@@ -1,4 +1,6 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div style="justify-content: center; display: flex; gap: 10px;" xs="1">My cell</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div style="justify-content: center; display: flex; gap: 10px;" xs="1">My cell</div>
+  </div>
 </div>

tests/Core/Grid/FluentGridTests.FluentGrid_Items_NoBreapoint.verified.razor.html

@@ -1,4 +1,6 @@
 
-<div class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-ljlkesaj3r="">
-  <div style="min-width: 200px;" xs="0">My cell</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: flex-start;" spacing="3" b-9fxwfzgab8="">
+    <div style="min-width: 200px;" xs="0">My cell</div>
+  </div>
 </div>

tests/Core/Grid/FluentGridTests.FluentGrid_SpacingJustify.verified.razor.html

@@ -1,2 +1,4 @@
 
-<div class="fluent-grid" style="justify-content: center;" spacing="5" b-ljlkesaj3r="">My content</div>
+<div b-9fxwfzgab8="">
+  <div id="xxx" class="fluent-grid" style="justify-content: center;" spacing="5" b-9fxwfzgab8="">My content</div>
+</div>