MUI v5 Grid - 均勻放置網格項目（justifyContent：space-evenly）

Question

我想實現一個最小高度為 500px 的框，並在該框內垂直居中放置三張卡片。 卡片應均勻分布，但justifyContent="space-evenly"根本不影響。

我正在使用 MUI v5 ( "@mui/material": "5.10.4" )。

我究竟做錯了什么？

<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>

謝謝！

Answer 1

似乎在您的父Grid容器中direction="column"導致了問題。 您需要將其設置為direction="row"或將其刪除。

這是工作代碼和框

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