Mui v5 网格系统

问题描述 投票:0回答:0

如何创建如下图所示的网格系统? enter image description here

左边是普通桌面视图,右边是移动视图。 其实我可以用

sx={{ display: {xs: "none", sm: "none", md: "block"} }}
来做到这一点,但我想知道有没有其他方法可以这样做?

<Grid container spacing={2}>
    <Grid item xs={12} sm={12} md={7} order={{ xs: 1, sm: 1, md: 0 }}>
        1
    </Grid>

    <Grid item xs={12} sm={12} md={5} order={{ xs: 0, sm: 0, md: 1 }}>
        2
    </Grid>

    <Grid item xs={12} sm={12} md={5} order={2}>
        3
    </Grid>
</Grid>

如上面的代码,它可以在移动视图中正常工作,但在桌面视图中,第三个网格项在第二个网格项下方。

因此,我尝试在第二个网格项之后添加另一个网格项:

{first grid}
{second grid}

<Grid item xs={0} sm={0} md={7} order={2} />

<Grid item xs={12} sm={12} md={5} order={3}>
    3
</Grid>

是的,它的工作,但第一个网格项目实际上是动态高度,当它变长时,第三个网格项目被推到底部。

reactjs grid mui5
© www.soinside.com 2019 - 2024. All rights reserved.