MudBlazor - Blazor Component Library

API

Spacing

Spacing: 6

<MudSlider @bind-Value="Spacing" Min="0" Max="20" 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; } = 6;
}

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>