CODEWITHSUNDEEP
blazormudblazor
dhrm
dhrm

Reputation: 14934

MudBlazor grid - align height of each row

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

Grid UI

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

Upvotes: 7

Views: 10268

Answers (2)

Matej Hlavaj
Matej Hlavaj

Reputation: 1038

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>

Upvotes: 11

grischdy
grischdy

Reputation: 1

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>

Upvotes: 0

Related Questions