无法正确呈现 Material UI React Grid

Question

我正在尝试使用此代码呈现响应式网格：

<div className={"root"}>
            <NavigationMenu pageName={"Report"}>
                <Container maxWidth="lg" className={"container"}>
                    <Grid container spacing={1}>
                        <Grid item xs={12} md={6} lg={4}>
                            <Paper className={"paper"}>
                            </Paper>
                        </Grid>
                        <Grid item xs={12} md={6} lg={8}>
                            <Paper className={"paper"}>
                            </Paper>
                        </Grid>
                        <Grid item xs={12} md={6} lg={4}>
                            <Paper className={"paper"}>
                            </Paper>
                        </Grid>
                    </Grid>
                </Container>
            </NavigationMenu>
        </div>

但是渲染出来的结果是这样的： Render result

但我想要这个： Expected result

我猜这是一些 css 问题，但我无法识别它。

https://github.com/mui-org/material-ui/issues/7602

我可以看到官方页面上的演示给出了相同的结果，我猜这就是 Grid 的工作方式。

codesandbox.io/s/material-demo-6wezp

我发现这个可以解决我的问题： https://github.com/paulcollett/react-masonry-css

Answer 1

Material UI 网格也有方向。因此，您可以创建 1 个具有行方向的网格，然后再创建 2 个具有列方向的嵌套网格。然后您的 2 篇较小的“论文”将以列方向进入第一个网格。这应该会给你预期的结果。

无法正确呈现 Material UI React Grid

Can't render Material UI React Grid properly

javascript

grid

user-interface

reactjs