材质 UI 布局 - 3 列

Question

我想使用 Material UI 设计类似这样的布局，我已经研究并考虑使用 Grid 组件，但是如何将中间列的类似内容实现为两行？

Answer 1

示例代码

我在以下代码中使用 Material UI 的 Grid component。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import clsx from "clsx";

const useStyles = makeStyles({
  container: {
    height: "100%", // So that grids 1 & 4 go all the way down
    minHeight: 150, // Give minimum height to a div
    border: "1px solid black",
    fontSize: 30,
    textAlign: "center"
  },
  containerTall: {
    minHeight: 250 // This div has higher minimum height
  }
});

export default function App() {
  const classes = useStyles();

  return (
    <Grid container direction="row" spacing={2}>
      <Grid item xs>
        <div className={classes.container}>1</div>
      </Grid>
      <Grid item container direction="column" xs spacing={2}>
        <Grid item xs>
          <div className={classes.container}>2</div>
        </Grid>
        <Grid item xs>
          <div className={clsx(classes.container, classes.containerTall)}>
            3
          </div>
        </Grid>
      </Grid>
      <Grid item xs>
        <div className={classes.container}>4</div>
      </Grid>
    </Grid>
  );
}

以上代码会产生如下结果：

说明

整体网格结构如下：

<Grid container direction="row">
  <Grid item xs />
  <Grid item xs container direction="column">
    <Grid item xs />
    <Grid item xs />
  </Grid>
  <Grid item xs />
</Grid>

我们首先创建一个具有行伸缩方向的网格容器。在容器内，我们放置了 3 个 Grid 项目组件，使它们从左到右对齐。对于第二个（中间）Grid 项，我们也将其定义为列具有 flex 方向的容器。在其中，我们放置了两个 Grid 项目，一个在顶部，一个在底部。

请注意，特别是对于网格 3 的代码，我添加了 className={clsx(classes.container, classes.containerTall)}。这基本上是说我们会将 classes.container 和 classes.containerTall 应用到这个网格。您可以read this section了解更多关于clsx()的信息。

为了使网格 3 比网格 2 稍高，我将网格 2 的 minHeight 设置为 150px，而将网格 3 的 minHeight 设置为 {{1 }}。

Answer 2

您可以从这里使用自动布局

https://material-ui.com/components/grid/#auto-layout

结构应该是

• 上校
• 上校
• ---- Row (3 size)
• ---- Row (3 size)
• 上校