Material UI 布局 - 3 列

Question

我想使用 material UI 设计我的布局分成两行??

Answer 1

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

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

结构应该是

列
列
---- 行（3 号）
---- 行（3 号）
列

Answer 2

示例代码

我在下面的代码中使用 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 设置为 250px.

Material UI 布局 - 3 列

Material UI Layout - 3 column

grid

reactjs

material-ui

示例代码

说明