Align Content

Controlling how rows are positioned in flex and grid containers.

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.

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.1

An unhandled error has occurred. Reload 🗙