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:

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

2 Answers

I had similar problem with cards.

You do not need to use flex or something from mudblazor css. Just use

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

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

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> <MudPaper Height="70vh" Elevation="3"> <MudText Typo="Typo.h6">Page 1</MudText> </MudPaper> </MudItem> <MudItem> <MudPaper Height="70vh" Elevation="3"> <MudText Typo="Typo.h6">Page 2</MudText> </MudPaper> </MudItem> </MudGrid>