MudBlazor 的网格和容器之间的区别

Question

我是 MudBlazor 的新手。

在引导程序中，如果我想调整多个断点的内容大小，我会使用网格（.container然后是.row和.col-x）。

MudBlazor 有一个MudGrid，但它也有一个MudContainer元素。

在很多示例代码中，我注意到人们使用它而不是网格。因此，在引导程序中，我必须摆弄xs、md等，使其在所有断点上看起来都很好，但在 mudblazor 中，人们似乎只使用MudContainerwith MaxWidth。

文档对此并不清楚。你什么时候会使用MudGrid，什么时候会使用MudContainer？它们相等吗？为什么需要容器？其中一个比另一个更容易使用吗？

Answer 1

在 MudBlazor 中，MudGrid和MudContainer组件具有不同的用途，并且它们并不等同。该MudContainer组件用于控制内容的整体宽度和对齐方式，同时该MudGrid组件用于创建具有 12 列网格系统的响应式布局。让我们深入了解每个组件的详细信息：

引导程序	泥刀
.container	MudContainer
.row	MudGrid
.col-xx	MudItem (with breakpoints)

泥浆容器

MudContainer用于将内容居中并控制其宽度。您有两种调整内容大小的选项：

• 流体：根据您的喜好将MaxWidth容器的温度设置为从ExtraSmall到。ExtraExtraLarge这将允许您的内容在定义的最大宽度内流畅地增大和缩小。
• 已修复：容器将“捕捉”到最近的断点。这将创建一个更严格的布局，以适应特定的断点。

泥网格

MudGrid是一个响应式 12 点网格系统，类似于Bootstrap 中的行 ( row) 和列 ( )。col-xx它用于创建适应不同屏幕尺寸的灵活布局。要在多个断点处控制布局，您可以使用MudItem具有不同断点属性（例如，xs，md等）的组件。

何时使用 MudContainer 和 MudGrid

MudContainer当您想要控制内容的整体宽度和对齐方式时，应该使用它。另一方面，MudGrid当您需要创建具有适应不同屏幕尺寸的多列的响应式布局时使用。

在许多情况下，您将同时使用这两个组件。例如，您可以将 a 包裹MudGrid在 a 内MudContainer以创建具有最大宽度的响应式布局。

但是，如果您已经在模板中为内容正文设置了容器MainLayout，则可能不需要使用MudGrid容器，因为将容器嵌套到另一个容器中可能会导致未对齐问题。

动画示例

您可以在下面的动画中直观地看到 MudBlazor 的网格和容器组件之间的差异：

动画示例代码：

<MudContainer MaxWidth="MaxWidth.Small" Style="background-color: lightcoral; height: 50px;" Class="mt-2">
    MudContainer > MaxWidth="MaxWidth.Small"
</MudContainer>

<MudContainer Fixed="true" Style="background-color: darkseagreen; height: 50px;"  Class="mt-2">
    MudContainer > Fixed
</MudContainer>

<MudContainer Style="background-color:pink; height: 50px;"  Class="mt-2">
    MudGrid inside MudContainer
    <MudGrid Style="background-color: darkkhaki;">
        <MudItem xs="6">
            <MudPaper Class="d-flex align-center justify-center mud-width-full py-3">xs=6</MudPaper>
        </MudItem>
        <MudItem xs="6">
            <MudPaper Class="d-flex align-center justify-center mud-width-full py-3">xs=6</MudPaper>
        </MudItem>
    </MudGrid>
</MudContainer>

<br/><br/>MudGrid
<MudGrid Style="background-color: darkkhaki;">
    <MudItem xs="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-3">xs=6</MudPaper>
    </MudItem>
    <MudItem xs="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-3">xs=6</MudPaper>
    </MudItem>
</MudGrid>