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