title: Material UI - React - Place Grid items in a column
body: <p>I need some help with positioning my Grid Items while using Material UI.</p>
  
  <p><a href="https://codesandbox.io/s/material-demo-tgef7" rel="nofollow noreferrer">Codesandbox</a> is where I am so far (roughly).</p>
  
  <p>And my question is quite simple - how do I get 2 &amp; 3 to go to the right of 1? I kinda do it but there are all those weird spaces to the left and down that, I cannot figure out how to deal with.</p>
  
  <p>That's the end result I'm after:
  <a href="https://i.stack.imgur.com/F9ish.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F9ish.png" alt="enter image description here"></a></p>
  
  <p>Thank you.</p>
  
  <pre><code>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 =&gt; ({
    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 (
      &lt;div&gt;
        &lt;Grid container spacing={3}&gt;
          &lt;Grid container direction="column"&gt;
            &lt;Grid item xs={8}&gt;
              &lt;Paper className={classes.paper + " " + classes.w}&gt;xs=8&lt;/Paper&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          &lt;Grid
            container
            style={{ display: "table", height: "100%" }}
            direction="row"
          &gt;
            &lt;Grid item xs={4}&gt;
              &lt;Paper className={classes.paper}&gt;xs=4&lt;/Paper&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={4}&gt;
              &lt;Paper className={classes.paper}&gt;xs=4&lt;/Paper&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
        &lt;Divider className={classes.divider} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>