MudGrid: Vertical alignment of cells

Question

I am new to MudBlazor and failing at a very basic level.

I want to create a table-like structure with a fixed number of cells, which should look like this:

Mountains 5
Lakes     3

where the left names should be regular size and the numbers are larger, i chose h4.

"Mountains" and "Lakes" should be vertically centered to the corresponding values, so that the vertical center of "Mountains" is equal to the vertical center of "5".

This is my basic approach:

<MudGrid Justify="Justify.Center" Class="flex-grow-1">
    <MudItem md="6" Class="d-flex">
        <MudText>Mountains</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">5</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Lakes</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">3</MudText>
    </MudItem>
</MudGrid>

But the "Mountains" and "Lakes" are aligned at the top. How can they be centered?

And some side questions:

• Is there some documentation where the concepts of MudBlazor is explained a little deeper? I get the impression the documentation is either explained only by examples or is missing at all (for example the meaning of the enums in Justify)

• Because i am also starting with .NET and Blazor at the same time, would you recommend using MudBlazor for a beginner, or is it more for advanced users of Blazor?

I already had a pretty long discussion with ChatGPT, but he was not able to deliver a solution either. The code above is from the beginning of the discussion.

Also i had a look at MudTable, but this seems too complicated for this simple requirement.

Answer 1

You can use the align-items CSS property to vertically align them.

So by either using Style property of the component to style it directly or using MudBlazors's CSS utility class, which you can add to the Class property.

Both the MudItem and the MudGrid are a flexbox so either can be styled.

Here's how you do it individually.

<MudGrid Justify="Justify.Center" Class="flex-grow-1">
    <MudItem md="6" Class="d-flex align-center">
        <MudText>Mountains Aligned</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">5</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Lakes not aligned</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">3</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex" Style="align-items:center;">
        <MudText>Aligned via Style</MudText>
    </MudItem>
</MudGrid>

Demo 👉 Individual MudItem align

And here's how you apply it to the entire MudGrid.

<MudGrid Justify="Justify.Center" Class="flex-grow-1 align-center">
    <MudItem md="6" Class="d-flex">
        <MudText>Mountains</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">5</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Lakes</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">3</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText>Aligned</MudText>
    </MudItem>
    <MudItem md="6" Class="d-flex">
        <MudText Typo="Typo.h4">8</MudText>
    </MudItem>
</MudGrid>

Demo 👉 MudGrid Align