CODEWITHSUNDEEP
javascriptcssreactjsmaterial-ui
Julian
Julian

Reputation: 87

How to disable MUI Grid items from stacking when window width is smaller than 600px

I am using the MUI Grid component to make a layout. I placed two grid items next to each other and one below it. However when I resize the window and the width becomes smaller than 600px the two grid items next to each other will stack. Does someone know where I can disable the two grid items stacking under 600px window width?

Upvotes: 2

Views: 1870

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81370

You can see the default breakpoint values here to know what xs or sm is. In Grid item, xs={12} sm={6} means that when the screen is smaller than sm (600px), grid item spans 12 columns (100% width), when it's smaller than md and larger than xs, grid item spans 6 columns (50% width)

<Grid container spacing={2}>
  <Grid item xs={12} sm={6}>
    <Item>xs=12 sm=6</Item>
  </Grid>
  <Grid item xs={12} sm={6}>
    <Item>xs=12 sm=6</Item>
  </Grid>
  <Grid item xs={12}>
    <Item>xs=12</Item>
  </Grid>
</Grid>

Edit: To disable stacking when the width is smaller than 600px:

<Grid container spacing={2}>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs={12}>
    <Item>xs=12</Item>
  </Grid>
</Grid>

Codesandbox Demo

Upvotes: 2

Related Questions