无法正确渲染Material UI React Grid

我正在尝试使用以下代码渲染响应式网格：

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

但是渲染结果如下所示：渲染结果

但我想要这样：预期结果

我的猜测是它有一些CSS问题，但我无法识别。

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

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

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

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