使用MudBlazor构建Blazor WASM布局时出现变形问题求助

我正尝试在Blazor WASM应用中使用MudBlazor实现如下布局：

但编写的代码导致布局出现变形（如拉伸、位置错位），以下是我的代码：

MainLayout.razor #

<MudLayout>
    <NavMenu></NavMenu>    
    <MudMainContent>
        @Body
    </MudMainContent>
</MudLayout>

Index.razor #

<MudPaper Width="100%" Class="darkbackground" MinHeight="350">
    <MudContainer style="border:1px solid red; width:100%;">
        <MudGrid>
            <MudItem xs="8" Style="display:flex; align:left">
                <MudGrid>
                    <MudItem xs="4" Style="display:flex;">
                        <MudPaper Width="100%" Square="false" Class="pa-10 ma-2 infobox" Outlined="true">
                            <MudCard>
                                <MudCardMedia Image="/images/Img1.png" Height="200" />
                                <MudCardContent Style="min-height: 100px">
                                    <MudText Class="textwhite" Typo="Typo.subtitle1">Title 1</MudText>
                                    <MudText Class="textsilver" Typo="Typo.body2">
                                        Text 1
                                    </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/Img2.png" Height="200" />
                                <MudCardContent Style="min-height: 100px">
                                    <MudText Class="textwhite" Typo="Typo.subtitle1">Title 2</MudText>
                                    <MudText Class="textsilver" Typo="Typo.body2">
                                        Text2
                                    </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/Img3.png" Height="200" />
                                <MudCardContent Style="min-height: 100px">
                                    <MudText Class="textwhite" Typo="Typo.subtitle1">Title 3</MudText>
                                    <MudText Class="textsilver" Typo="Typo.body2">
                                        Text 3
                                    </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/Img4.png" Height="200" />
                                <MudCardContent Style="min-height: 100px">
                                    <MudText Class="textwhite" Typo="Typo.subtitle1">Title 4</MudText>
                                    <MudText Class="textsilver" Typo="Typo.body2">
                                        Text 4
                                    </MudText>
                                </MudCardContent>
                            </MudCard>
                        </MudPaper>
                    </MudItem>
                </MudGrid>
            </MudItem>
            <MudItem xs="4" Style="display:flex;">
                <MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
                    <MudTabPanel Text="Tab One">
                        <MudText>Content One</MudText>
                    </MudTabPanel>
                    <MudTabPanel Text="Tab Two">
                        <MudText>Content Two</MudText>
                    </MudTabPanel>
                    <MudTabPanel Text="Tab Three">
                        <MudText>Content Three</MudText>
                    </MudTabPanel>
                    <MudTabPanel Text="Tab Disabled" Disabled="true">
                        <MudText>Content Disabled</MudText>
                    </MudTabPanel>
                </MudTabs>
            </MudItem>
            <MudItem xs="12" Style="display:flex;"></MudItem>
        </MudGrid>         
    </MudContainer>    
</MudPaper>

内容的提问来源于stack exchange，提问作者jason