MudBlazor - Blazor Component Library

API

Spacing

Spacing: 2

<MudSlider @bind-Value="spacing" Min="0" Max="10" Color="Color.Info" Class="mb-6">Spacing: @spacing.ToString()</MudSlider>

<MudGrid Spacing="@spacing" Justify="Justify.Center">
    <MudItem>
        <MudPaper Height="140px" Width="140px"/>
    </MudItem>
    <MudItem>
        <MudPaper Height="140px" Width="140px"/>
    </MudItem>
    <MudItem>
        <MudPaper Height="140px" Width="140px" />
    </MudItem>
</MudGrid>

@code {
    public int spacing { get; set; } = 2;
}

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>