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