Material-UI 中的 Box 和 Grid 有什么区别？

Question

Box和Grid在Material-UI中有什么区别？

什么时候使用它们？

我感到困惑。

- Yoel

Answer 1

网格创建视觉上的一致性，同时允许在各种设计中实现灵活性。Material Design响应式UI基于12列网格布局。

工作原理

网格系统通过Grid组件实现：

它使用CSS的Flexible Box模块实现高度灵活性。 有两种类型的布局：容器和项目。 项目宽度以百分比设置，因此它们始终是流体的，并且相对于其父元素调整大小。项目具有填充以创建单个项目之间的间距。有五个网格断点：xs、sm、md、lg和xl。

Box只是一个盒子。它是一个包装在其内容周围的元素，本身不含样式规则，也没有任何默认效果的视觉输出。但它是放置样式规则的地方。它不提供任何真正的功能，只是一个控制分层标记结构中样式的占位符。

我经常认为它在语义上类似于JSX空元素：

<>
    Some elements here
</>

只需使用部分Material UI功能：

 <Box component="span" m={1}>
     <Button />
 </Box>

- Sohail Shahzad

Answer 2

简而言之：

Box是一个更强大、方便且有潜力的替代品，可用于取代div。您可以将其更改为任何HTML元素（例如span），但大部分时间您将使用它来替换div。

Grid是网格布局(Grid Layout)的语法糖。

- Matthew Kwong

---

你确定吗？我们一直在使用Grid来代替flexbox。但它似乎与CSS Grid没有任何关系。 - David Harkness

是的。因此，MUI使用Flexbox来创建其网格。 - saran

Answer 3

需要对多个项目进行分组并控制它们在页面上的外观时，请使用 Box。例如，您可以取几个段落并使用框将其包围。

使用 Grid 设置网格布局系统以在页面上的列中组织内容。设计师将页面划分为12列，并认为沿着每个列或列组对齐内容更具视觉吸引力。以下是一篇提供有关此主题更详细信息的文章：https://www.interaction-design.org/literature/article/the-grid-system-building-a-solid-design-layout

- Lazor

Answer 4

Box

Box组件是大多数CSS工具需求的包装器组件。Box组件打包了@material-ui/system中公开的所有样式函数。它是使用@material-ui/core/styles的styled()函数创建的。

Grid

GridBox是Grid的低级表示。除了低级笔记本表达式操作外，不应直接使用GridBox。在笔记本中，可以使用<Column>添加GridBox的列，使用<Row>添加行，或者使用菜单项开始构建GridBox。

- Muhammad Arbaz Zafar

Answer 5

Box

Box组件用于大多数CSS实用需求的包装器组件。

Box组件包装您的组件。它创建一个新的DOM元素，默认情况下是<div>，可以通过组件属性进行更改。

假设您想使用<span>代替:

<Box component="span" m={1}>
  <Button />
</Box>

这在修改新的DOM元素时非常有效。例如，您可以通过这种方式更改边距。

网格

Material Design响应式布局网格会根据屏幕大小和方向进行调整，确保布局的一致性。

该网格在布局之间创建视觉一致性，同时允许在各种设计中灵活使用。Material Design的响应式UI基于12列网格布局。

它是如何工作的

网格系统是使用Grid组件实现的：

- 它使用CSS的Flexible Box模块具有高度的灵活性。 - 有两种类型的布局：容器和项目。 - 项目宽度以百分比设置，因此始终是流体并相对于其父元素进行调整大小。 - 项目具有填充以创建单个项目之间的间距。 - 有五个网格断点：xs、sm、md、lg和xl。

进一步阅读 Box和Grid的文档

- Rashed Rahat