Grid - MudBlazor

Spacing

Spacing: 2

<MudGrid>
    <MudItem xs="12">
        <MudGrid Spacing="@spacing" Justify="Justify.Center">
            <MudItem>
                <MudPaper Style="height:140px;width:140px;" />
            </MudItem>
            <MudItem>
                <MudPaper Style="height:140px;width:140px;" />
            </MudItem>
            <MudItem>
                <MudPaper Style="height:140px;width:140px;" />
            </MudItem>
        </MudGrid>
    </MudItem>
</MudGrid>
<MudPaper Class="d-flex align-center mud-full-width px-4 py-2 mt-6" Elevation="0">
    <MudButton Color="Color.Primary" OnClick="@AddSpacing">Change Spacing</MudButton>
    <MudToolBarSpacer/>
    <MudText>Spacing: @spacing</MudText>
</MudPaper>

@code {
    public int spacing { get; set; } = 2;
    void AddSpacing()
    {
        if (spacing >= 10)
        {
            spacing = 0;
        }
        else
        {
            spacing += 1;
        }
        StateHasChanged();
    }
}

Basic grid

The column widths apply at all breakpoints, xs and up.

xs=12

xs=6

xs=3

<MudGrid>
    <MudItem xs="12">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=12</MudPaper>
    </MudItem>
    <MudItem xs="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=6</MudPaper>
    </MudItem>
    <MudItem xs="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=6</MudPaper>
    </MudItem>
    <MudItem xs="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=3</MudPaper>
    </MudItem>
    <MudItem xs="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=3</MudPaper>
    </MudItem>
    <MudItem xs="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=3</MudPaper>
    </MudItem>
    <MudItem xs="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=3</MudPaper>
    </MudItem>
</MudGrid>

Grid with breakpoints

You can apply multiple column widths, causing the layout to change at the specific break point.

xs=12

xs=12 sm=6

xs=6 sm=3

<MudGrid>
    <MudItem xs="12">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=12</MudPaper>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=12 sm=6</MudPaper>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=12 sm=6</MudPaper>
    </MudItem>
    <MudItem xs="6" sm="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=6 sm=3</MudPaper>
    </MudItem>
    <MudItem xs="6" sm="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=6 sm=3</MudPaper>
    </MudItem>
    <MudItem xs="6" sm="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=6 sm=3</MudPaper>
    </MudItem>
    <MudItem xs="6" sm="3">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">xs=6 sm=3</MudPaper>
    </MudItem>
</MudGrid>