MUI 网格 2 列 - 自定义高度

Question

我正在尝试使用 MUI 网格设置两列。一列包含两个框，占 9/12，然后一列占 3/12，100% vh。

我已经接近了，但无法让第二列与页面顶部对齐。

<Grid  container  spacing={1}>

  
<Grid  item xs={12} sm={7} lg={9}> 
<Card  className={classes.welcomeBar}>

<p className={classes.welcomeHeader}> Welcome back SpongeBob! </p>

 </Card>
</Grid>


<Grid item xs={12} sm={7} lg={9}> 
<Card  className={classes.sectionHeight}>
<CardContent>
<p> This is the main content</p>
</CardContent>
 </Card>
</Grid>

<Grid container  item xs={12} sm={5} lg={3}> 
<Card className={classes.tipsHeight}>
<CardContent>
<p> This is the tip bar</p>
</CardContent>
 </Card>

</Grid>

</Grid>

Answer 1

我认为您只需要稍微调整一下布局...实际上您有两个网格，一个为您提供 two-column 布局，另一个网格在 left-hand 内提供行的列。（或者，您可以使用 Stack 作为 left-hand 列的内部内容布局，具体取决于您要在其中放置的内容。）

<Grid container spacing={1} sx={{ width: '100vw', height: '100vh' }}>
    <!-- LH column -->
    <Grid container xs={12} sm={7} lg={9}>
        <!-- LH column content - you can swap for another grid if you need -->
        <Stack spacing={1} flex="1 1 0">
            <Card>
                <p> Welcome back SpongeBob! </p>
            </Card>

            <Card>
                <CardContent>
                    <p> This is the main content</p>
                </CardContent>
            </Card>
        </Stack>
    </Grid>

    <!-- RH column -->
    <Grid container item xs={12} sm={5} lg={3}>
        <Card>
            <CardContent>
                <p> This is the tip bar</p>
            </CardContent>
        </Card>
    </Grid>
</Grid>

MUI 网格 2 列 - 自定义高度

MUI Grid 2 Columns - Custom Heights

reactjs

material-ui