Material UI - React - Поместить элементы сетки в столбец

Question

Мне нужна помощь с позиционированием элементов сетки при использовании пользовательского интерфейса материала.

Codesandbox , где я нахожусь (примерно).

И мой вопрос довольно просто - как мне получить 2 & 3 к go справа от 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>
  );
}

Answer 1

Некоторые точки уведомления из вашего кода

• используйте один контейнер для одной структуры поля сетки
• удалить настройку направления direction="column"
• xs сумма должна меньше или равно 12, если вы хотите установить их в один ряд.

Пожалуйста, проверьте документ material-ui grid для лучшего понимания

<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} />

---

Обновление:

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

Попробуйте онлайн: