CODEWITHSUNDEEP
reactjsmaterial-ui
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

MUI Grid 2 Columns - Custom Heights

I'm trying to have two columns with MUI grid. One column containing two boxes that take up 9/12 and then one column taking up 3/12 with 100% vh.

enter image description here

I've come close but can't get the second column to align to the top of the page.

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

Upvotes: 0

Views: 3412

Answers (1)

gerrod
gerrod

Reputation: 6627

I think you just need to adjust the layout a little... effectively you've got two grids, one that gives you the two-column layout, and then another grid inside the left-hand column that provides the rows. (Alternatively, you can use a Stack for the inner content layout of the left-hand column depending on what you want to put in there.)

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

Upvotes: 2

Related Questions