CODEWITHSUNDEEP
reactjsmaterial-uigrid
Samuel Zrna
Samuel Zrna

Reputation: 159

Mui Grid Item Fixed Width Item Beside Fill Width Item

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>

Upvotes: 12

Views: 29056

Answers (2)

Ben in CA
Ben in CA

Reputation: 851

With MUI v. 6, the best way to handle the "fill width" has changed, and here's a sample combining several of the sizing techniques:

<Grid2 container spacing={3}>
  <Grid2 size="auto">
    <Item>size=auto > fit content</Item>
  </Grid2>
  <Grid2 size={6}>
    <Item>size=6 > 50% of the width</Item>
  </Grid2>
  <Grid2 sx={{width: '400px'}}>
    <Item>fixed width</Item>
  </Grid2>
  <Grid2 size="grow">
    <Item>size=grow > expand to take up the remaining space</Item>
  </Grid2>
</Grid2>

For more, see the documentation: https://mui.com/material-ui/react-grid2/

(The previous answer was likely for MUI v. 4.)

Upvotes: 2

Richard Hpa
Richard Hpa

Reputation: 2887

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.

Upvotes: 20

Related Questions