MudBlazor grid - align height of each row

Question

I've this MudGrid with 4 MudCard items with dynamically content and height.

<MudGrid>
    <MudItem xs="12">
        <MudGrid>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>
                        Line1<br/>
                        Line1<br/>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>                                               
                        Line1<br/>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>
                        Line1<br/>
                        Line1<br/>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
            <MudItem xs="6">
                <MudCard>
                    <MudCardContent>
                        Line1<br/>
                    </MudCardContent>
                </MudCard>
            </MudItem>
        </MudGrid>
    </MudItem>
</MudGrid>

Available on this url: https://try.mudblazor.com/snippet/mOclFQwNJgFhMuBf

Is it possible to have the height each MudCard on the same line/row to be aligned?

Matej Hlavaj · Accepted Answer · 2022-01-04 12:02:35Z

I had similar problem with cards.

You do not need to use flex or something from mudblazor css. Just use style="height:100%"

I already tested it... Grid is aligned well. Only Card is not properly flexed...

<MudGrid>
<MudItem xs="12">
    <MudGrid>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>
                    Line1<br/>
                    Line1<br/>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>                                               
                    Line1<br/>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>
                    Line1<br/>
                    Line1<br/>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
        <MudItem xs="6">
            <MudCard style="height:100%">
                <MudCardContent>
                    Line1<br/>
                </MudCardContent>
            </MudCard>
        </MudItem>
    </MudGrid>
</MudItem>

grischdy · Accepted Answer · 2021-12-31 10:09:00Z

0

I had the same problem. I wanted to make a grid within "tabs". I solved it as follows. certainly not the best way

              <MudGrid>
                <MudItem Style="width: 70vh;">
                    <MudPaper Height="70vh" Elevation="3">
                        <MudText Typo="Typo.h6">Page 1</MudText>
                    </MudPaper>
                </MudItem>
                <MudItem Style="width: 70vh;">
                    <MudPaper Height="70vh" Elevation="3">
                        <MudText Typo="Typo.h6">Page 2</MudText>
                    </MudPaper>
                </MudItem>
            </MudGrid>

answered Dec 31, 2021 at 10:09

grischdy

11 bronze badge

Collectives™ on Stack Overflow

MudBlazor grid - align height of each row

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related