Javascript 使用物料界面时出现问题<；网格>；用于两列布局

我正在尝试实现两列布局，两列的高度相等，每列占屏幕的一半。图片更好地解释了这一点

不工作代码如下所示：

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

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    alignItems: "stretch"
  },
  column: {
    flexDirection: "column"
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: "center",
    color: theme.palette.text.secondary
  }
}));

export default props => {
  const classes = useStyles();
  return (
    <>
      <CssBaseline />
      <Grid container className={classes.root}>
        {/* COLUMN ONE */}
        <Grid container item className={classes.column}>
          <Grid item xs={6}>
            <Paper className={classes.paper}>1: xs=6</Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>1: xs=6</Paper>
          </Grid>
          <Grid container item>
            <Grid item xs={3}>
              <Paper className={classes.paper}>1: xs=3 left</Paper>
            </Grid>
            <Grid item xs={3}>
              <Paper className={classes.paper}>1: xs=3 right</Paper>
            </Grid>
          </Grid>
        </Grid>
        {/* COLUMN TWO */}
        <Grid container item className={classes.column}>
          <Grid item xs={6}>
            <Paper className={classes.paper}>2: xs=6</Paper>
          </Grid>
          <Grid item xs={6}>
            <Paper className={classes.paper}>2: xs=6</Paper>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
对齐项目：“拉伸”
},
专栏：{
flexDirection：“列”
},
论文：{
填充：主题。间距（2），
textAlign：“居中”，
颜色：theme.palete.text.secondary
}
}));
导出默认道具=>{
const classes=useStyles（）；
返回(
{/*第一列*/}
1:xs=6
1:xs=6
1:xs=3左
1:xs=3右
{/*第二列*/}
2:xs=6
2:xs=6
);
};

必须使用代码沙盒

---

有人能解释一下我做错了什么吗

在布局嵌套网格容器的方式上，Material UI存在一个bug。@londonoliver发现的解决方法是将容器嵌套在网格项中：

<Grid container direction="row">
  <Grid item>
    <Grid container direction="column">
      <Grid item>1</Grid>
      <Grid item>2</Grid>
    </Grid>
  </Grid>
  <Grid item>
    <Grid container direction="column">
      <Grid item>3</Grid>
      <Grid item>4</Grid>
    </Grid>
  </Grid>
</Grid>

1.
2.
3.
4.

在布局嵌套网格容器的材质UI方式中存在一个错误。@londonoliver发现的解决方法是将容器嵌套在网格项中：

<Grid container direction="row">
  <Grid item>
    <Grid container direction="column">
      <Grid item>1</Grid>
      <Grid item>2</Grid>
    </Grid>
  </Grid>
  <Grid item>
    <Grid container direction="column">
      <Grid item>3</Grid>
      <Grid item>4</Grid>
    </Grid>
  </Grid>
</Grid>

1.
2.
3.
4.

看起来呈现的HTML是正确的，所以问题可能在CSS中。看起来呈现的HTML是正确的，所以问题可能在CSS中。