Css 材质UI-反应-将网格项放置在列中

在使用材质UI时，我需要一些关于定位网格项的帮助

这就是我目前（大致）所处的位置

我的问题很简单-我如何让2和3到1的右边？我有点这样做，但是在左边和下面有很多奇怪的空间，我不知道该怎么处理

这就是我追求的最终结果：

多谢各位

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

const useStyles = makeStyles(theme => ({
  container: {
    // display: "grid",
    gridTemplateColumns: "repeat(12, 1fr)",
    gridGap: theme.spacing(3)
  },
  paper: {
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary,
    whiteSpace: "nowrap",
    marginBottom: theme.spacing(1)
  },
  w: {
    height: "100px"
  },
  divider: {
    margin: theme.spacing(2, 0)
  }
}));

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

  return (
    <div>
      <Grid container spacing={3}>
        <Grid container direction="column">
          <Grid item xs={8}>
            <Paper className={classes.paper + " " + classes.w}>xs=8</Paper>
          </Grid>
        </Grid>
        <Grid
          container
          style={{ display: "table", height: "100%" }}
          direction="row"
        >
          <Grid item xs={4}>
            <Paper className={classes.paper}>xs=4</Paper>
          </Grid>
          <Grid item xs={4}>
            <Paper className={classes.paper}>xs=4</Paper>
          </Grid>
        </Grid>
      </Grid>
      <Divider className={classes.divider} />
    </div>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Divider”导入分隔器；
从“@material ui/core/Grid”导入网格；
const useStyles=makeStyles（主题=>({
容器：{
//显示：“网格”，
gridTemplateColumns：“重复（12，1fr）”，
网格间距：主题。间距（3）
},
论文：{
填充：主题。间距（1），
textAlign：“居中”，
颜色：theme.palete.text.secondary，
空白：“nowrap”，
marginBottom：主题。间距（1）
},
w:{
高度：“100px”
},
分隔器：{
边距：主题。间距（2，0）
}
}));
导出默认函数CSSGrid（）{
const classes=useStyles（）；
返回(
xs=8
xs=4
xs=4
);
}

代码中的一些注意事项

• 对一个网格字段结构使用一个容器
• 删除方向设置

  direction=“column”

• xs

  sum需要小于或等于12，才能将它们设置为一行

请检查文件以便更好地理解

<Grid container spacing={3}>
  <Grid item xs={8}>
    <Paper className={classes.paper + " " + classes.w}>xs=8</Paper>
  </Grid>
  <Grid item xs={2}>
    <Paper className={classes.paper}>xs=2</Paper>
  </Grid>
  <Grid item xs={2}>
    <Paper className={classes.paper}>xs=2</Paper>
  </Grid>
</Grid>
<Divider className={classes.divider} />

xs=8
xs=2
xs=2

---

更新：

xs=8
xs=4
xs=4

在线试用：

---

代码中的一些注意事项

• 对一个网格字段结构使用一个容器
• 删除方向设置

  direction=“column”

• xs

  sum需要小于或等于12，才能将它们设置为一行

请检查文件以便更好地理解

<Grid container spacing={3}>
  <Grid item xs={8}>
    <Paper className={classes.paper + " " + classes.w}>xs=8</Paper>
  </Grid>
  <Grid item xs={2}>
    <Paper className={classes.paper}>xs=2</Paper>
  </Grid>
  <Grid item xs={2}>
    <Paper className={classes.paper}>xs=2</Paper>
  </Grid>
</Grid>
<Divider className={classes.divider} />

xs=8
xs=2
xs=2

---

更新：

xs=8
xs=4
xs=4

在线试用：

---

非常感谢您，但也许我应该更清楚地解释一下。请原谅并参考编辑后的帖子。再次感谢您。：）非常感谢你，但也许我应该更清楚地解释一下。请原谅并参考编辑后的帖子。再次感谢您。：）