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

Question

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!

Answer 1

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',
        },
        }}
> 
...