Using MudBlazor for design layout issues

Question

I am trying to use MudBlazor, for my Blazor WASM app, to make this kind of layout:

This is the code that I have but everything looks distorted (i.e. stretched and not in the right position):

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>

Answer 1

The

<MudItem xs="4" Style="display:flex;">

is breaking your layouts. Remove it and use the breakpoint's and other components if required.

Also, directly styling components like this

<MudContainer style="border:1px solid red; width:100%;">

is not a good idea as the component are usually a wrapper around various HTML elements and you won't really know what element you're styling.

I recommend using the properties that are available on the components to style your components and if you do need to override certain styles then target that specific class directly.

Not sure if this is what you're trying to make. But here's my attempt at recreating your layout

MudBlazor Snippet.