Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Grid

The grid component helps keep layout consistent across various screen resolutions and sizes. Mudblazor comes with a 12 point grid system amd contains 5 types of breakpoints that are used for specific screen sizes.

Read more about MudBlazor's breakpoints here.

See Grid API for parameter documentation.

Spacing

Spacing: 2

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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=6
xs=3
xs=3
xs=3
xs=3
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙