Grid

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>
    <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=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>

Grid Builder

Calculate your breakpoints with this tool. Move the slider to add and remove items.

Justify

3

4

2

3

2

4

<MudGrid>
    <MudItem xs="12">
        <MudSlider Min="1" Max="20" Immediate="true" Step="1" @bind-Value="papers"></MudSlider>
    </MudItem>
    <MudItem xs="12">
        <MudSelect Label="Justify" T="Justify" @bind-Value="justification">
            <MudSelectItem Value="Justify.FlexStart">Flex Start</MudSelectItem>
            <MudSelectItem Value="Justify.FlexEnd">Flex End</MudSelectItem>
            <MudSelectItem Value="Justify.Center">Center</MudSelectItem>
            <MudSelectItem Value="Justify.SpaceAround">Space Around</MudSelectItem>
            <MudSelectItem Value="Justify.SpaceBetween">Space Between</MudSelectItem>
            <MudSelectItem Value="Justify.SpaceEvenly">Space Evenly</MudSelectItem>
        </MudSelect>
    </MudItem>
    <MudItem xs="12">
        <MudGrid Justify="justification">
            @for (int i = 0; i < papers; i++)
            {
                int localindex = i;
                
                <MudItem xs="@breaks[localindex]">
                    <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">
                        <table>
                            <tr>
                                <td>
                                    <MudIconButton Icon="@Icons.Material.Filled.KeyboardArrowUp" OnClick="(()=>UpdateBreaks(localindex,1))" Size="Size.Small"></MudIconButton>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <MudText Typo="Typo.h6" Style="margin:2px 4px 2px 4px;" Align="Align.Center">@breaks[localindex]</MudText>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <MudIconButton Icon="@Icons.Material.Filled.KeyboardArrowDown" OnClick="(()=>UpdateBreaks(localindex,-1))" Size="Size.Small"></MudIconButton>
                                </td>
                            </tr>
                        </table>
                    </MudPaper>
                </MudItem>
             }
        </MudGrid>
    </MudItem>
</MudGrid>

@code{

    int _papers = 7;
    int papers { get { return _papers; } set { UpdatePapers(value); } }

    int[] breaks = new int[7] { 3, 4, 2, 3, 3, 2, 4 };

    Justify justification = Justify.FlexStart;

    void UpdatePapers(int value)
    {

        int[] newbreaks = Enumerable.Repeat(3, value).ToArray();

        for (int i = 0; i < newbreaks.Length; i++)
        {
            if ( i < breaks.Length)
            {
                newbreaks[i] = breaks[i];
            }
        }

        breaks = newbreaks;

        _papers = value;

        StateHasChanged();
    }

    void UpdateBreaks(int index,int changeamount)
    {
        List<int> newbreaks = breaks.ToList();

        newbreaks[index] = newbreaks[index] += changeamount;

        breaks = newbreaks.ToArray();

        StateHasChanged();
    }

}

API

Spacing

Basic grid

Grid with breakpoints

Grid Builder

3

4

2

3

3

2

4