MudBlazor – Understanding the Layout Components
When building responsive and structured UIs with MudBlazor, it’s essential to understand how layout containers, grids, and stacks work together.
1. MudContainer
Outer wrapper for the page or section
2. MudGrid and MudItem
MudBlazor uses a 12-column grid system. Defines a row container for grid items.
<MudGrid>
<MudItem xs=”6″>GTColumn 1</MudItem>
<MudItem xs=”6″>GTColumn 2</MudItem>
</MudGrid>
MudItem – Represents a grid cell inside the grid.
It will create two columns (each taking 6 out of 12 columns) on extra-small screens.
3. MudStack
A flexible layout component used to arrange elements with equal spacing between them.
Can be used in both horizontal (row) or vertical (column) directions.
<MudGrid>
<MudItem xs=”6″>GTColumn 1</MudItem>
<MudItem xs=”6″>GTColumn 2</MudItem>
</MudGrid>
Spacing=”2″ – defines the space between child elements.
4. MudRow
Similar to MudGrid but used when you don’t need automatic column sizing.
Gives you explicit control over child arrangement.Defines a row container (acts like a flex row).
<MudRow>
<MudItem xs=”6″>
<MudPaper Class=”pa-4″>Left Side</MudPaper>
</MudItem><MudItem xs=”6″>
<MudPaper Class=”pa-4″>Right Side</MudPaper>
</MudItem>
</MudRow>
5. MudPaper
Represents a card-like surface with a white background.
Useful for visually grouping sections or forms.
6. Nested MudStack
Outer stack → Row direction (horizontal)
Inner stack → Column direction (vertical)
Spacing=”2″ → Adds space between each element.
<MudStack Direction=”Row”>
<MudStack Direction=”Column” Spacing=”2″>
<MudText>GTCORE Item1</MudText>
<MudText>GTCORE Item2</MudText>
</MudStack>
<MudStack Direction=”Column” Spacing=”2″>
<MudText>GTCORE Item3</MudText>
<MudText>GTCORE Item4</MudText>
</MudStack>
</MudStack>
7. MudForm
Used for creating forms with validation.
Works together with components like MudTextField, MudSelect, etc.
<MudForm @ref=”form” Model=”@gtCoreModel”>
<MudTextField Label=”Name” @bind-Value=”gtCoreModel.Name” Required=”true”/>
<MudButton OnClick=”Submit”>Submit</MudButton>
</MudForm>
8. MudPaper + MudStack Layout
<MudPaper Class=”pa-4″>
<MudStack Direction=”Column” Spacing=”2″>
<MudText Typo=”Typo.h6″>Section Title</MudText>
<MudDivider />
<MudText>Content goes here…</MudText>
</MudStack>
</MudPaper>
-Thank you, happy coding !!
