MudBlazor 网格 - 对齐每行的高度答案

【问题标题】：MudBlazor grid - align height of each rowMudBlazor 网格 - 对齐每行的高度
【发布时间】：2022-01-27 23:05:31
【问题描述】：

我有这个 MudGrid 和 4 个 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 的高度对齐？

【问题讨论】：

标签： blazor mudblazor

【解决方案1】：

我遇到了同样的问题。我想在“标签”中创建一个网格。我解决了它如下。当然不是最好的方法

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

【讨论】：

【解决方案2】：

我也有类似的卡片问题。

您不需要使用 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>

【讨论】：