与材质 ui 重叠网格答案

【问题标题】：Overlap Grid with Material ui与材质 ui 重叠网格
【发布时间】：2020-11-04 11:39:35
【问题描述】：

我正在尝试将两个网格项与 Material UI 重叠，但在尝试不同的方法后我失败了，如果有人能指出我正确的方向。

所以基本上试图将 item 2 居中并让 item 1 大约 1/3 进入 item 2强>.

  <Grid
    container
    direction="column"
    justify="flex-start"
    alignItems="flex-start"
    style={{ width: "100%", height: "100%", background: "pink" }}
  >
    <Grid
      item
      container
      xs={4}
      style={{ width: "100%", height: "100%", background: "blue" }}
    >
      1
    </Grid>

    <Grid
      item
      xs={6}
      style={{ width: "100%", height: "100%", background: "red" }}
    >
      <Grid
        item
        xs={2}
        justify="center"
        style={{ width: "10", background: "grey" }}
      >
        <h1>2/2</h1>
      </Grid>
    </Grid>
    <Grid
      item
      xs={4}
      style={{ width: "100%", height: "100%", background: "brown" }}
    >
      3
    </Grid>
  </Grid>
</div>

【问题讨论】：

很确定您不想为此使用网格。根据定义，网格项目以网格布局，而不是重叠。
嗨，JMadelaine！哦，我是新手，我认为网格是一个快速的解决方案。请让我知道您推荐什么方法？谢谢！
如果您是 React 和一般开发新手，我不会使用 Material UI 之类的第三方库，而是开始构建您自己的组件。这样你会更容易理解发生了什么。
我担心 JMadelaine 可能有点夸大了这个案例。如果可以在 material-ui 中找到解决方案，那么我认为提供该解决方案比将一个自称是新手的人送入 React、JSX 和样式的荒野要好得多。

标签： reactjs responsive-design grid material-ui

【解决方案1】：

网格项目也可以是容器。不过要注意顺序。使用

【讨论】：

这应该是一条评论
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

首先，您的第二个网格是错误的，它不能同时是 container 和 item。

其次，您应该检查此Grid system 和此Breakpoint system，这将使您了解必须传递给网格（父级和子级）以获得所需布局的道具。

基本上你在哪里尝试这样做：

<Grid container justify="center" alignItems="center">
    <Grid item xs={12} md={12} lg={12} xl={12} sm={12}>
        <Typography>Item 2</Typography>
    </Grid>
    <Grid container direction="column" justify="center" alignItems="center">
        <Grid item xs={4} md={4} lg={4} xl={4} sm={}>
            <Typography>Item 1</Typography>
        </Grid>
    </Grid>
</Grid>

希望对你有帮助！

【讨论】：

我很抱歉，但我很确定你是不正确的。我鼓励您向下滚动您提供的“网格系统”链接并查看“嵌套网格”。经常需要嵌套网格行为。 component 属性允许该项目包含其他项目。