How to dynamic column width for Material UI Grid-CodePudding

For the material UI grid, is it possible to dynamically have the column width change for grid items - within the same container?

Because I sometimes have 2 grid items, that need to display in the same row, and I sometimes have 4 grid items that I need in the same row. Here is a codebox, the top container has two grid items. The second container has 4 grid items and I want them to appear in the same row whilst having the same width (xs).

Here is a code sandbox https://codesandbox.io/s/material-demo-forked-c09gtg?file=/demo.js

CodePudding user response：

Auto-layout

The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.

You need to only include xs and don't give it any value for each Grid item.

<Grid container spacing={1}>
  <Grid item xs>
    <Item>first item</Item>
  </Grid>
  <Grid item xs>
    <Item>second item</Item>
  </Grid>
  <Grid item xs>
    <Item>third item</Item>
  </Grid>
  <Grid item xs>
    <Item>fourth item</Item>
  </Grid>
</Grid>

MUI Grid Documentation