网格与盒子：什么时候使用哪个？- 移动用户界面

Question

所以我有以下问题，我认为这是非常有效的。

因此，据我所知，Box 和 Grid 是布局组件，您应该在其中添加其他组件。然而，有时 Box 会帮我完成这项工作，有时是 Grid，有时我会同时使用两者。

在我尝试将组件居中后，我想到了这个问题，因此在这个示例中，当我使用 GRID 时，我可以将组件居中于屏幕中间，没有任何问题：

网格示例：

示例A-沙箱

框示例：

示例B-沙箱

我知道我可以简单地将 pl={number} 添加到框组件，然后我可以将框移动到所需位置，但这不是重点。

Answer 1

Material UI 中 Grid 和 Box 组件的区别： Box 组件：Box 组件的功能类似于标签，您可以通过定义具有不同值的“组件”属性来将其设置为任何其他组件，例如“div、section、button... " 并且它将充当有效的 HTML 标记。 网格组件：用于在页面上创建布局，在定义网格组件时，您必须设置“网格容器”（父组件）并在其中传递“网格项”（子组件），您的页面将分为12 列网格布局，通过在其中定义不同的Box组件并根据屏幕大小，您提供的内容将以不同的方式显示。作为使用 MUI 的前端开发人员，我非常喜欢使用网格组件来创建响应式网页设计。

• 结论：如果您想为整个页面创建布局，请使用Grid，如果您想向页面添加内容，例如（在 Grid 内）使用Box，

请参阅下面的链接了解更多信息： MUI Grid MUI Box