MudBlazor - Blazor Component Library

Class	Properties
align-content-center	align-content: center;
align-content-end	align-content: flex-end;
align-content-space-around	align-content: space-around;
align-content-space-between	align-content: space-between;
align-content-start	align-content: flex-start;
align-content-stretch	align-content: stretch;

Basic Usage

Start

<MudPaper Class="d-flex align-content-start flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
</MudPaper>

Center

<MudPaper Class="d-flex align-content-center flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
</MudPaper>

End

<MudPaper Class="d-flex align-content-end flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
</MudPaper>

Space between

<MudPaper Class="d-flex align-content-space-between flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
</MudPaper>

Space around

<MudPaper Class="d-flex align-content-space-around flex-wrap flex-grow-1 gap-4" MaxWidth="608px" Height="320px" Elevation="0">
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
    <MudPaper Class="mud-theme-primary" Width="128px" Height="64px"/>
</MudPaper>

Applying conditionally

Breakpoints

You can use the utility class to target media queries like responsive breakpoints. For example, use align-content-md-end to apply the align-content-end utility at only medium screen sizes and above.

<div class="...align-content-md-end">
  ...
</div>

To learn more, check out the documentation on Breakpoints and other modifiers you can use.

Align Content