FluentGrid becomes wider when Spacing increases

[sschutten]

🐛 Bug Report

The FluentGrid becomes wider the more the value for Spacing increases. I would assume it would remain the same width, only to increase the padding inside.

💻 Repro or Code Sample

The following razor shows 4 different grids with Spacing ranging from 1, 2, 3 and 10.

<div style="width: 500px; margin-left: auto; margin-right: auto; background-color: var(--neutral-layer-2)">
    <br />
    <FluentGrid Spacing="1" Justify="@JustifyContent.FlexStart" Style="background-color: var(--neutral-layer-4);">
        <FluentGridItem xs="12">
            <div class="card">
                Spacing=1
            </div>
        </FluentGridItem>
    </FluentGrid>
    <br />
    <FluentGrid Spacing="2" Justify="@JustifyContent.FlexStart" Style="background-color: var(--neutral-layer-4);">
        <FluentGridItem xs="12">
            <div class="card">
                Spacing=2
            </div>
        </FluentGridItem>
    </FluentGrid>
    <br />
    <br />
    <FluentGrid Spacing="3" Justify="@JustifyContent.FlexStart" Style="background-color: var(--neutral-layer-4);">
        <FluentGridItem xs="12">
            <div class="card">
                Spacing=3
            </div>
        </FluentGridItem>
    </FluentGrid>
    <br />
    <br/>
    <br />
    <FluentGrid Spacing="10" Justify="@JustifyContent.FlexStart" Style="background-color: var(--neutral-layer-4);">
        <FluentGridItem xs="12">
            <div class="card">
                Spacing=10
            </div>
        </FluentGridItem>
    </FluentGrid>

</div>

🤔 Expected Behavior

Each grid would be even wide.

😯 Current Behavior

The grid with the larger Spacing value is wider than the others, as shown in the screenshot below:

💁 Possible Solution

I think the approach for calculating the width and margin for the grid is off. According to the css, the width is increased with 8px per Spacing. The margin left and right increases each with 4px. Perhaps it's done with an very good reason, but I don't understand why.

🔦 Context

I'm trying to embed a FluentGrid inside a panel. Doing so causes a horizontal scrollbar to appear, because the child content is too wide due to the Spacing issue.

🌍 Your Environment

• OS & Device: Windows 11 on PC
• Browser Microsoft Edge
• .NET and Fluent UI Blazor library version: 8.0.2 and 4.4.1