MudBlazor

Community Support

Discord

GitHub Discussions

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

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Grid

The grid component helps keeping layout consistent across various screen resolutions and sizes. MudBlazor comes with a 12-point grid system and 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>
    <MudSpacer/>
    <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 🗙