Same size for all MudItem using MudBlazor

Question

I'm trying in MudBlazor to make e-commerce style boxes where you can view image, product name and other information.

I am currently using the MudGrid with the related MudItem. See this example:

As you can see the height of the various MudItem is not the same for all, but it adapts according to the size of the image. I would like the MudItem to be all the same high and that they remain responsive (depending on the display device)

You can find the code here: https://try.mudblazor.com/snippet/GaGcYmmFziEpEAPJ

Answer 1

I have the same issue, you need to do the following:

<MudGrid>
        <MudItem Style="display:flex;"> each card </MudItem>
        <MudItem Style="display:flex;"> each card </MudItem>
        <MudItem Style="display:flex;"> each card </MudItem>
</MudGrid>

Then you can adjust the content of each card. Also to avoid calling style everytime you could inject some css with one class.

Answer 2

I was able to accomplish this by setting the MudItem style to display:flex and setting the MudCardContent style to min-height: 100px (in my case)

<MudPaper Width="100%" Class="darkbackground" MinHeight="350">
<MudContainer>
    <MudGrid>
        <MudItem xs="4" Style="display:flex;">
            <MudPaper Width="100%" Square="false" Class="pa-10 ma-2 infobox" Outlined="true">
                <MudCard>
                    <MudCardMedia Image="/images/rm/rm1.png" Height="200" />
                    <MudCardContent Style="min-height: 100px">
                        <MudText Class="textwhite" Typo="Typo.subtitle1">Always Evolving</MudText>
                        <MudText Class="textsilver" Typo="Typo.body2">Creating innovative new ways to trade the exchange markets</MudText>
                    </MudCardContent>
                </MudCard>
            </MudPaper>
        </MudItem>
        <MudItem xs="4" Style="display:flex;">
            <MudPaper Width="100%" Square="false" Class="pa-10 ma-2 infobox" Outlined="true">
                <MudCard>
                    <MudCardMedia Image="/images/rm/rm2.png" Height="200" />
                    <MudCardContent Style="min-height: 100px">
                        <MudText Class="textwhite" Typo="Typo.subtitle1">Is RainMaker Open Source?</MudText>
                        <MudText Class="textsilver" Typo="Typo.body2">RainMaker is not open source. Currently just a passion project</MudText>
                    </MudCardContent>
                </MudCard>
            </MudPaper>
        </MudItem>
        <MudItem xs="4" Style="display:flex;">
            <MudPaper Width="100%" Square="false" Class="pa-10 ma-2 infobox" Outlined="true">
                <MudCard>
                    <MudCardMedia Image="/images/rm/rm3.png" Height="200" />
                    <MudCardContent Style="min-height: 100px">
                        <MudText Class="textwhite" Typo="Typo.subtitle1">What is required to trade?</MudText>
                        <MudText Class="textsilver" Typo="Typo.body2">A broker account with Oanda.</MudText>
                    </MudCardContent>
                </MudCard>
            </MudPaper>
        </MudItem>
</MudGrid>
</MudContainer>