title: Nesting Grid with Material-UI
body: <p>So, I am having issues with getting material-ui grid to work as i want. I am trying to render a row with two columns.</p>
  
  <pre><code>import React from 'react';
  import DefaultLayout from '../layouts/default';
  import Grid from '@material-ui/core/Grid';
  
  class profile extends React.Component {
    render() {
  
      return (
      &lt;React.Fragment&gt;
        &lt;Grid container spacing={8}&gt;
        &lt;Grid item xs={12} style={{backgroundColor: 'blue', height: '250px'}}&gt;&lt;/Grid&gt;
        &lt;Grid item xs={12} style={{backgroundColor: 'grey', height: '250px'}}&gt;&lt;/Grid&gt;
  
        {/* Form two columns with next row*/}
  
        &lt;Grid container={'true'} item sx={12}&gt;
          &lt;Grid item={'true'} xs={6} md={8} style={{backgroundColor: 'green', height: '50px'}}&gt;&lt;/Grid&gt;
          &lt;Grid item={'true'} xs={6} md={4} style={{backgroundColor: 'orange', height: '50px'}}&gt;&lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt; 
    &lt;/React.Fragment&gt;
  )}}
  
  module.exports = profile;
  </code></pre>
  
  <p>Currently, It is rendering:</p>
  
  <p><a href="https://i.stack.imgur.com/dlyCW.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dlyCW.png" alt="enter image description here"></a></p>
  
  <p>I want the orange and green rows to be two columns on the same row. Side by side.</p>
  
  <p>Can anyone decipher what is wrong with my code?</p>
  
  <p>@material-ui/core: ^3.9.2</p>
  
  <p>react: ^16.7.0</p>