Javascript 在不使用填充的情况下向材质UI网格添加空白列

我正在学习使用Material UI Grid，我想在列的右侧添加一个空白列（如第一个元素右侧的填充），而不使用填充

以代码为例：

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


const ExampleGridComponent = () => {

    const useStyles = makeStyles(theme => ({
        root: {
            flexGrow: 1,
        },
        paper: {
            padding: theme.spacing(2),
            textAlign: 'center',
            color: theme.palette.text.secondary,
        },
    }));
    const classes = useStyles();

    return (

        <Grid container spacing={3}>
            <Grid item xs={12}>
                <Paper className={classes.paper}>xs=12</Paper>
            </Grid>
            <Grid item xs={12} sm={6}>
                <Paper className={classes.paper}>xs=12 sm=6</Paper>
            </Grid>
            <Grid item xs={12} sm={6}>
                <Paper className={classes.paper}>xs=12 sm=6</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
                <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
                <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
                <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
                <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
        </Grid>)
}

export default ExampleGridComponent;

从“React”导入React；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从'@material ui/core/styles'导入{makeStyles}；
const ExampleGridComponent=（）=>{
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
论文：{
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
},
}));
const classes=useStyles（）；
返回(
xs=12
xs=12 sm=6
xs=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
)
}
导出默认ExampleGridComponent；

它看起来像这样：

---

我们如何在所有元素（图片中的棕色）的右侧放置一个空白列

用行和列包装项目网格

    <Grid container spacing={3}>
        <Grid item xs={9}>
            <Grid container>
                <Grid item xs={12}>
                    <Paper className={classes.paper}>xs=12</Paper>
                </Grid>
                <Grid item xs={12} sm={6}>
                    <Paper className={classes.paper}>xs=12 sm=6</Paper>
                </Grid>
                <Grid item xs={12} sm={6}>
                    <Paper className={classes.paper}>xs=12 sm=6</Paper>
                </Grid>
                <Grid item xs={6} sm={3}>
                    <Paper className={classes.paper}>xs=6 sm=3</Paper>
                </Grid>
                <Grid item xs={6} sm={3}>
                    <Paper className={classes.paper}>xs=6 sm=3</Paper>
                </Grid>
                <Grid item xs={6} sm={3}>
                    <Paper className={classes.paper}>xs=6 sm=3</Paper>
                </Grid>
                <Grid item xs={6} sm={3}>
                    <Paper className={classes.paper}>xs=6 sm=3</Paper>
                </Grid>
            </Grid>
        </Grid>
        <Grid item xs={3}>
        </Grid>
    </Grid>

xs=12
xs=12 sm=6
xs=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3

请参阅：

• 文件

• 嵌套网格项：

从“React”导入React；
导入“/styles.css”；
从“@material ui/core/Grid”导入网格；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/styles”导入{makeStyles}”；
常量应用=（）=>{
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1
},
论文：{
填充：主题。间距（2），
textAlign：“居中”，
颜色：theme.palete.text.secondary
}
}));
const classes=useStyles（）；
返回(
xs=12
xs=12 sm=6
xs=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
);
};
导出默认应用程序；

import React from "react";
import "./styles.css";

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

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

  return (
    <>
      <Grid container>
        <Grid item xs={8}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              <Paper className={classes.paper}>xs=12</Paper>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Paper className={classes.paper}>xs=12 sm=6</Paper>
            </Grid>
            <Grid item xs={12} sm={6}>
              <Paper className={classes.paper}>xs=12 sm=6</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
            <Grid item xs={6} sm={3}>
              <Paper className={classes.paper}>xs=6 sm=3</Paper>
            </Grid>
          </Grid>
        </Grid>
        <Grid item xs={4}>
          <Grid item xs={12}>
          </Grid>
        </Grid>
      </Grid>
    </>
  );
};

export default App;