Search code examples
reactjsmaterial-ui

Material UI grid spacing attribute isn't working

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.

Here is my code

import React from 'react'
import { Grid, makeStyles,Box,Card,CardContent} from '@material-ui/core'


const useStyles =makeStyles(theme=>({
    root:{
      flexGrow:1
    },
  
    heading:{
       fontSize:"clamp(74px,9vw,120px)",
       margin:"6px auto",
       opacity:"0.5",
       color:"#dee3e4",
       textAlign:"center",
       fontFamily:"Poppins,sans-serif"
       
    }, 
}))
function Projects() {
    const { heading,root}=useStyles();
    return (
        <div>
            <h1 className={heading}>Projects</h1>
            <Box m={5}  >
            <Grid container spacing={3} className={root} >  
            
              <Grid sm={12} md={6} lg={3}  >     
                    <Card>
                    <h1>Booksapp</h1>
                    <CardContent>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.
                    </CardContent>
                  </Card>
               </Grid>
                <Grid  sm={12} md={6} lg={3}>
                  <Card>
                    <h1>Booksapp</h1>
                    <CardContent>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.
                    </CardContent>
                  </Card>
                </Grid>
                <Grid  sm={12} md={6} lg={3}>
                  <Card>
                    <h1>Booksapp</h1>
                    <CardContent>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.
                    </CardContent>
                  </Card>
                </Grid>     
            </Grid>
            </Box>
           
        </div>
    )
}

export default Projects
Solution

  • The issue is that you're not passing the item boolean prop to the grid items. The spacing prop defines the space between the item components and since there are no grid items in the posted code, no spacing gets applied.

    <Grid container spacing={3} className={root}>
  <Grid item sm={12} md={6} lg={3}>
    <Card>Content</Card>
  </Grid>
</Grid>

    Edit material-ui-grids-gb5y4