CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
mlz7
mlz7

Reputation: 2157

Unable to center material-ui GridList

I have a GridList which I am using to display Cards. These components are styled as follows:

card.js

const useStyles = makeStyles({
    card: {
        maxWidth: 240,
        margin: 10
    },
    media: {
        height: 100
    }
})

grid.js

const useStyles = makeStyles(theme => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'space-around',
        overflow: 'hidden'
    },
    gridList: {
        width: '80%',
        height: '100%'
    }
}))

export default function CardGridList() {
const classes = useStyles()

return (
    <div className={classes.root}>
        <GridList className={classes.gridList} cols={4}>
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
            <CardItem />
        </GridList>
    </div>
    )
}

and finally, container.js (which uses styled-components)

const ContainerWrapper = styled.div`
    margin: 0 auto;
`

export default class Container extends React.Component {
    render() {
        return (
            <ContainerWrapper>
                <ThickSpace />
                <CardGridList />
            </ContainerWrapper>
        )
    }
}

However, no matter what combination of properties I try, I cannot get the cards to align in the center. I am always left with something like this:

enter image description here

Where the GridList is skewed off-center. I have gone through the material-ui documentation, looked at numerous explanations like this, but nothing is working. Please help!

Upvotes: 2

Views: 311

Answers (1)

John Ruddell
John Ruddell

Reputation: 25842

You specify margin: 0 auto; on the top level container element, however you don't give the element any styles that make this auto margin take effect. You need to give a width gate for the element, so that way the auto margin will actually space on either side.

const ContainerWrapper = styled.div`
    margin: 0 auto;
    max-width: 1040px;
`

I got 1040 from the size of the card you defined. 240 width and 10 margin on each side means 20 px of space (first card 10px on right, second card 10px on the left). 260 * 4 = 1040 :)

Upvotes: 3

Related Questions