Mui Grid Item Fixed Width Item Beside Fill Width Item Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Mui Grid Item Fixed Width Item Beside Fill Width Item without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m currently using MUI Grid (but I’m open to alternate solutions) and I want two components side by side: the right most taking up 400px of width and the left component taking up the rest.

|<——————————- 100% of page ——————————->|

|<——————– Fill ——————–>| |<———- 400px ———–>|

When page width is shrunk:

|<——————– 100% of page ——————–>|

|<——— Fill ———>| |<———- 400px ———–>|

My code is currently stretching the leftComponent to 100% of the page and pushing the rightComponent below it.

<Grid container spacing={3}>
    <Grid item xs={12} >
        <leftComponent />
    </Grid>
    <Grid item style={{width: "400px"}}>
        <rightComponent />
    </Grid>
</Grid>

Answer

All you need to do is remove the number for your xs value. Doing this just tells the item to have a width of auto which will just fill the space

<Grid container spacing={3}>
    <Grid item xs>
        <leftComponent />
    </Grid>
    <Grid item style={{width: "400px"}}>
        <rightComponent />
    </Grid>
</Grid>

Though I would recommend not using grid for this situation but using Box component instead as the Grid component is really meant to stick with the 12 columns and adding in a fixed width would break it.

We are here to answer your question about Mui Grid Item Fixed Width Item Beside Fill Width Item - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji