材质 UI 布局 - 3 列答案

【问题标题】：Material UI Layout - 3 column材质 UI 布局 - 3 列
【发布时间】：2021-02-23 05:33:46
【问题描述】：

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

【问题讨论】：

请贴一些代码

【解决方案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 item 组件，使它们从左到右对齐。对于第二个（中间）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。

【讨论】：

【解决方案2】：

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

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

结构应该是

Col
Col
---- 行（3 号）
---- 行（3 号）
Col

【讨论】：