Material-UI 中的 Container 与 Grid 容器有什么不同？

Question

正如我在问题中提到的：Container 与 Grid 在 Material-UI 中具有 container 属性有何不同？

非常感谢！

Answer 1

我访问了材料 UI 的文档，这是我在检查这些时发现的：

容器

当您在代码中使用<Container> 时，以下样式将应用于您的<Container> 组件。

正如您在上面的屏幕截图中看到的，存在两个重要的属性，

• display: block
• max-width: 600px（在媒体查询中，根据视口宽度而有所不同）

网格

当您在代码中使用属性容器时，将应用以下样式，

正如您在上面看到的，它利用 flexbox 布局来保存列，这对于保存弹性项目（即列）很有用。它还根据您指定的间距类型设置其最大宽度。

在检查了这些差异之后，在我看来，<Container> 用于包含所有组件的外包装，而<Grid container> 可用于创建列布局（12 列），这不是在<Container>的情况下真的有可能。