materiel-ui中的Box和Grid有什么区别

Question

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

何时使用每个

我对此感到困惑

Answer 1

简而言之：

Box是 . 的更强大、更方便且有潜力的替代品div。您可以将其更改为任何 HTML 元素（例如span），但大多数时候您将使用它作为div替换。

Grid是Grid Layout的语法糖。

Answer 2

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

这个怎么运作

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

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

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

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

<>
    Some elements here
</>

但只需使用一些 Material UI 功能：

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

Answer 3

当您想要对多个项目进行分组并控制它们在页面上的外观时，请使用 Box。例如，您可以选取多个段落并使用框在它们周围添加边框。

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