title: Material UI grid spacing attribute isn't working
body: <p>I am trying to render some cards using Material UI grids but when I try to add spacing between the cards its not working. I have gone through the documentation and some answers here on stack overflow but still can't fix the issue. I am a beginner and I feel like I am making some silly mistake but I am not able to find the bug.</p>
  <p>Here is my code</p>
  <pre><code>import React from 'react'
  import { Grid, makeStyles,Box,Card,CardContent} from '@material-ui/core'
  
  
  const useStyles =makeStyles(theme=&gt;({
      root:{
        flexGrow:1
      },
    
      heading:{
         fontSize:&quot;clamp(74px,9vw,120px)&quot;,
         margin:&quot;6px auto&quot;,
         opacity:&quot;0.5&quot;,
         color:&quot;#dee3e4&quot;,
         textAlign:&quot;center&quot;,
         fontFamily:&quot;Poppins,sans-serif&quot;
         
      }, 
  }))
  function Projects() {
      const { heading,root}=useStyles();
      return (
          &lt;div&gt;
              &lt;h1 className={heading}&gt;Projects&lt;/h1&gt;
              &lt;Box m={5}  &gt;
              &lt;Grid container spacing={3} className={root} &gt;  
              
                &lt;Grid sm={12} md={6} lg={3}  &gt;     
                      &lt;Card&gt;
                      &lt;h1&gt;Booksapp&lt;/h1&gt;
                      &lt;CardContent&gt;Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      &lt;/CardContent&gt;
                    &lt;/Card&gt;
                 &lt;/Grid&gt;
                  &lt;Grid  sm={12} md={6} lg={3}&gt;
                    &lt;Card&gt;
                      &lt;h1&gt;Booksapp&lt;/h1&gt;
                      &lt;CardContent&gt;Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      &lt;/CardContent&gt;
                    &lt;/Card&gt;
                  &lt;/Grid&gt;
                  &lt;Grid  sm={12} md={6} lg={3}&gt;
                    &lt;Card&gt;
                      &lt;h1&gt;Booksapp&lt;/h1&gt;
                      &lt;CardContent&gt;Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      Lorem, ipsum dolor sit amet consectetur adipisicing eltatis.
                      &lt;/CardContent&gt;
                    &lt;/Card&gt;
                  &lt;/Grid&gt;     
              &lt;/Grid&gt;
              &lt;/Box&gt;
             
          &lt;/div&gt;
      )
  }
  
  export default Projects
   
  </code></pre>