title: How to remove unnecessary space between Grid Rows of Material-UI?
body: <p><a href="https://i.stack.imgur.com/nASqM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nASqM.png" alt="enter image description here"></a>I was trying to use material ui grid system but there is an awkward space occur when i use grid <code>direction='row'</code>.<a href="https://i.stack.imgur.com/sl59V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sl59V.png" alt="enter image description here"></a></p>
  
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
      gridHome: {
          minHeight: '100vh',
          border: '2px solid red'
      },
      gridContent: {
          width: '100%',
          border: '2px solid black',
          textAlign: 'center'
      },
      title: {
          fontFamily: 'Dancing Script,Sans Serif,cursive',
      }
   }));
  
  const NewUser = () =&gt; {
      const classes = useStyles();
      return (
          &lt;React.Fragment&gt;
              &lt;Grid container direction='row' justify='center' alignItems='flex-start' className= 
              {classes.gridHome}&gt;
                  &lt;Grid item xs={12} md={12} className={classes.gridContent}&gt;
                      &lt;Typography className={classes.title}&gt;user&lt;/Typography&gt;
                  &lt;/Grid&gt;
                  &lt;Grid item xs={12} md={12} className={classes.gridContent}&gt;
                      &lt;Typography className={classes.title}&gt;Welcome User&lt;/Typography&gt;
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
         &lt;/React.Fragment&gt;
      );
  }
  </code></pre>