Question

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

何时使用每个

我对此感到困惑

Answer 1

简而言之：

Box 是 div 的更强大、更方便和潜在的替代品。

Grid 是 Gird Layout 的语法糖。

Answer 2

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

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

Answer 3

盒子

Box 组件充当大多数 CSS 实用程序需求的包装器组件。 Box 组件封装了@material-ui/system 中暴露的所有样式函数。它是使用@material-ui/core/styles

的 styled() 函数创建的

网格

GridBox 是 Grid 的低级表示。除了低级笔记本表达式操作，GridBox 应该不需要直接使用。在笔记本中，GridBox 的列可以使用 .或者可以使用菜单项开始构建 GridBox。

Answer 4

框

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 上的文档

Answer 5

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design’s responsive UI is based on a 12-column grid layout
How it works
The grid system is implemented with the Grid component:

It uses CSS’s Flexible Box module for high flexibility.
There are two types of layout: containers and items.
Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Items have padding to create the spacing between individual items.
There are five grid breakpoints: xs, sm, md, lg, and xl.

A Box is just that, a box. It's an element wrapped around its content which by itself contains no styling rules nor has any default effects on the visual output. But it's a place to put styling rules as needed. It doesn't offer any real functionality, just a placeholder for controlling the styles in the hierarchical markup structure.

I often think of it as semantically similar to the JSX empty element:<br>
**<>
  Some elements here
</>**

But just with some Material UI capabilities: <br>
   <Box component="span" m={1}>
         <Button />
   </Box>

Materiel-ui中Box和Grid有什么区别

5 个答案:

框

网格

进一步阅读