Mui Grid Item Fixed Width Item Beside Fill Width Item

December 23, 2021

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>

>Solution :

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.