Mudblazor Grid - Align Height of Each Row
I've This Mudgrid with 4 Mudcard Items with Dynamically Content and Height. Line1 Line1 Line1 Line1 Line1 Line1 Line1 Line1 Line1 Available on This Url: Is It...
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 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>
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>
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
