title: MUI: How can I remove spacing on Grid item in small breakpoint?
body: <p>I have a basic <code>Grid</code> using a spacing of <code>5</code>. I want that spacing not to happen at the <code>xs</code> breakpoint. How can I remove it on the <code>xs</code> breakpoint?</p>
  <p>You can see a demo <a href="https://stackblitz.com/edit/hfkmxi?file=demo.js" rel="nofollow noreferrer">here</a>.</p>
  <pre><code>import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Grid from '@material-ui/core/Grid';
  import Paper from '@material-ui/core/Paper';
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      flexGrow: 1,
    },
    paper: {
      height: 140,
      width: 100,
    },
  }));
  
  export default function SpacingGrid() {
    const classes = useStyles();
  
    return (
      &lt;Grid container justify=&quot;center&quot; spacing={5}&gt;
        &lt;Grid item&gt;
          &lt;Paper className={classes.paper} /&gt;
        &lt;/Grid&gt;
        &lt;Grid item&gt;
          &lt;Paper className={classes.paper} /&gt;
        &lt;/Grid&gt;
        &lt;Grid item&gt;
          &lt;Paper className={classes.paper} /&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    );
  }
  </code></pre>