material-uigridjustify

MUI v5 Grid - space grid items evenly (justifyContent: space-evenly)


I want to achieve a box of a minimum height of 500px and three cards vertically centered within this box. The cards shall be spaced evenly but justifyContent="space-evenly" is not affecting at all.

Im using MUI v5 ("@mui/material": "5.10.4").

What am I doing wrong?

<Grid
    container
    spacing={0}
    direction="column"
    alignItems="center"
    justifyContent="center"
    sx={{
        minHeight: 500,
        backgroundColor: '#f1f2f3',
        '&:hover': {
            backgroundColor: '#ffffff',
        },
        }}
>

    <Grid item xs={12}>
        <Grid container direction="row" justifyContent="space-evenly" alignItems="center" sx={{pt:10, pb:10}}>
            <Grid item>
                <Card sx={{
                    width: 300,
                    height: 400,
                    backgroundColor: "#030814",
                }}>
                </Card>
            </Grid>
            <Grid item>
                <Card sx={{
                    width: 300,
                    height: 400,
                    backgroundColor: "#030814",
                }}>
                </Card>
            </Grid>
            <Grid item>
                <Card sx={{
                    width: 300,
                    height: 400,
                    backgroundColor: "#030814",
                }}>
                </Card>
            </Grid>
        </Grid>
    </Grid>
</Grid>

Thanks!


Solution

  • Seems that in you parent Grid container the direction="column" is causing the issue. Either you need to set it to direction="row" or just remove it.

    Here is the working codesandbox

    <Grid
        container
        spacing={0}
        // direction="column"  // This is causing the issue
        alignItems="center"
        justifyContent="center"
        sx={{
            minHeight: 500,
            backgroundColor: '#f1f2f3',
            '&:hover': {
                backgroundColor: '#ffffff',
            },
            }}
    > 
    ...