MudBlazor 网格 - 对齐每行的高度

Question

我有MudGrid4 个MudCard具有动态内容和高度的项目。

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

在此网址上可用： https: //try.mudblazor.com/snippet/mOclFQwNJgFhMuBf

是否可以使同一行/行上的每个高度MudCard对齐？

Answer 1

我的卡也有类似的问题。

你不需要使用 flex 或 mudblazor css 中的东西。只需使用 style="height:100%"

我已经测试过了...网格对齐得很好。只是卡没有正确弯曲...

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

Answer 2

我有同样的问题。我想在“选项卡”内制作一个网格。我解决如下。当然不是最好的方法

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