I’m trying to create a responsive Blazor page using MudBlazor and MudGrid. A basic representation of this issue is:

<MudGrid>
    <MudItem xs="12" lg="6">
        <MudTextField Value="@value" HelperText="Label 1" Variant="Variant.Outlined" />
    </MudItem>

    <MudItem xs="12" lg="6">
        <MudTextField Value="@value" HelperText="Label 2" Variant="Variant.Outlined" />
    </MudItem>

    
</MudGrid>

<MudTextField Value="@value" HelperText="Label 3" Variant="Variant.Outlined" />

<MudTextField Value="@value" HelperText="Label 4" Variant="Variant.Outlined" />

@code {
    private string value = "Text Value";
}

At the larger viewport, this displays as expected:

but when you break under the large viewport, it creates a wider gap between the two fields in the grid, such as:

I am expecting the spacing to be equal across the four fields otherwise it looks odd on a smaller screen and the idea of breaking to be efficient use of screen space.

If I use the Bootstrap Flex grid the spacing is as expected but I don’t want to mix frameworks and I’m pretty far down the road on MudBlazor.

Here is a try link:

https://try.mudblazor.com/snippet/cuQeErmPpLzsAQuP

I’ve been playing around with the CSS around .mud-grid-item but it messes with the fields on lines that aren’t broken and the helper text ends up sitting on top of the field below.

Any ideas?