title: How do I apply gutters but not margins in Material UI grid?
body: <p>I have been struggling for ages to get my responsive layout to work! But things go out of alignment when I apply spacing to the Grid container with class=spotlight. How can I apply spacing to the gutters (i.e. between the Grid items within the spotlight container Grid) but not the margins (i.e. outside the grid). Here is my code:</p>
  <pre><code>import React from &quot;react&quot;;
  import { Grid, makeStyles, Typography } from &quot;@material-ui/core&quot;;
  import MasterLayout from &quot;../components/MasterLayout&quot;;
  import ContentThumbnail from &quot;../components/ContentThumbnail&quot;;
  import ContentList from &quot;../components/ContentList&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    masterLayout: {
      padding: theme.spacing(3),
    },
    spotlight: {},
  }));
  
  const DefaultDashboard = ({ padding }) =&gt; {
    const classes = useStyles();
    return (
      &lt;MasterLayout&gt;
        {/*Top row with right bar */}
        &lt;Grid
          container
          className={classes.masterLayout}
          spacing={3}
          alignItems=&quot;flex-start&quot;
        &gt;
          {/* Spotlight section */}
          &lt;Grid container xl={8} lg={12} item className={classes.spotlight}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;Typography variant=&quot;h3&quot;&gt;Spotlight&lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xl={3} lg={3} md={3} xs={6}&gt;
              &lt;ContentThumbnail /&gt;
            &lt;/Grid&gt;
            &lt;Grid item xl={3} lg={3} md={3} xs={6}&gt;
              &lt;ContentThumbnail /&gt;
            &lt;/Grid&gt;
            &lt;Grid item xl={3} lg={3} md={3} xs={6}&gt;
              &lt;ContentThumbnail /&gt;
            &lt;/Grid&gt;
            &lt;Grid item xl={3} lg={3} md={3} xs={6}&gt;
              &lt;ContentThumbnail /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          {/* List section 1 */}
          &lt;Grid container item xl={4} lg={3} md={6} xs={12}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;Typography variant=&quot;h3&quot;&gt;Title 2&lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12}&gt;
              &lt;ContentList /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          {/* List section 2 */}
          &lt;Grid container item xl={4} lg={3} md={6} xs={12}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;Typography variant=&quot;h3&quot;&gt;Title 2&lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12}&gt;
              &lt;ContentList /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          {/* List section 3 */}
          &lt;Grid container item xl={4} lg={3} md={6} xs={12}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;Typography variant=&quot;h3&quot;&gt;Title 3&lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12}&gt;
              &lt;ContentList /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
          {/* List section 4 */}
          &lt;Grid container item xl={4} lg={3} md={6} xs={12}&gt;
            &lt;Grid item xs={12}&gt;
              &lt;Typography variant=&quot;h3&quot;&gt;Title 4&lt;/Typography&gt;
            &lt;/Grid&gt;
            &lt;Grid item xs={12}&gt;
              &lt;ContentList /&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/MasterLayout&gt;
    );
  };
  
  export default DefaultDashboard;
  </code></pre>
  <p>Many thanks,</p>
  <p>Katie</p>