Gap

Utilities for controlling gutters between grid and flexbox items.

Class Properties
gap-0 gap: 0px;
gap-1 gap: 4px;
gap-10 gap: 40px;
gap-11 gap: 44px;
gap-12 gap: 48px;
gap-13 gap: 52px;
gap-14 gap: 56px;
gap-15 gap: 60px;
gap-16 gap: 64px;
gap-2 gap: 8px;
gap-3 gap: 12px;
gap-4 gap: 16px;
gap-5 gap: 20px;
gap-6 gap: 24px;
gap-7 gap: 28px;
gap-8 gap: 32px;
gap-9 gap: 36px;
gap-x-0 column-gap: 0px;
gap-x-1 column-gap: 4px;
gap-x-10 column-gap: 40px;
gap-x-11 column-gap: 44px;
gap-x-12 column-gap: 48px;
gap-x-13 column-gap: 52px;
gap-x-14 column-gap: 56px;
gap-x-15 column-gap: 60px;
gap-x-16 column-gap: 64px;
gap-x-2 column-gap: 8px;
gap-x-3 column-gap: 12px;
gap-x-4 column-gap: 16px;
gap-x-5 column-gap: 20px;
gap-x-6 column-gap: 24px;
gap-x-7 column-gap: 28px;
gap-x-8 column-gap: 32px;
gap-x-9 column-gap: 36px;
gap-y-0 row-gap: 0px;
gap-y-1 row-gap: 4px;
gap-y-10 row-gap: 40px;
gap-y-11 row-gap: 44px;
gap-y-12 row-gap: 48px;
gap-y-13 row-gap: 52px;
gap-y-14 row-gap: 56px;
gap-y-15 row-gap: 60px;
gap-y-16 row-gap: 64px;
gap-y-2 row-gap: 8px;
gap-y-3 row-gap: 12px;
gap-y-4 row-gap: 16px;
gap-y-5 row-gap: 20px;
gap-y-6 row-gap: 24px;
gap-y-7 row-gap: 28px;
gap-y-8 row-gap: 32px;
gap-y-9 row-gap: 36px;
Basic Usage
Setting Gap

<MudPaper Class="gap-4 d-flex flex-wrap" MaxWidth="560px" Elevation="0">
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="256px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="256px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="256px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="256px"/>
</MudPaper>
Row and Column

<MudPaper Class="gap-x-8 gap-y-4 d-flex flex-wrap" MaxWidth="560px" Elevation="0">
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="128px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="128px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="128px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="128px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="128px"/>
    <MudPaper Class="flex-auto mud-theme-primary" Height="64px" Width="128px"/>
</MudPaper>
Applying conditionally
Breakpoints

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

<div class="...gap-md-4">
  ...
</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 🗙