Material UI Grid item not working properly

user_239879 0
Viewed 638

I have:

      <div style={{ flexGrow: 1 }}>
        <Grid container spacing={0} style={{ width: '100%' }}>
          <Grid item xs={12} sm={6}>
            Left Side
          </Grid>
          <Grid item xs={12} sm={6}>
            right Side
          </Grid>
        </Grid>
      </div>

You can see the generated styles are just MuiGrid-item with no reference of the size. What am I doing wrong?

enter image description here

material-ui reactjs css javascript
2 Answers

I copied your code to a CODE-SANDBOX and everything was fine there.

Here is the screenshot: Chrome DevTools snapshot

As you can see, everything is working like a charm.

The only thing that I mentioned in your question is that in the screenshot you've provided, you've applied a background: red; style to the container, but there is no such a style property in the code that you've inserted.

Maybe you're not connected to the development server, and you are viewing a cached version, which can be caused by service workers in your PWA.

It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.

It was great If you could provide more details in your question.

user_121246420

!! you didn’t do anything wrong, you can watch here your code and it work https://codesandbox.io/s/zealous-montalcini-x02kg with class "MuiGrid-grid-xs-12 MuiGrid-grid-sm-6" like you want .

your code is correct

have you tried turn it off and on again? lol

maybe you watch your code in wrong page, the old version of your code or something like that, also try to open your page in private browser and check if it's work.

also check if you use last version of material-ui. i mean version accept CSS Grid Layout (but i think it's work in all version just check that maybe!?).

i hope that can help you, have a good luck.

user_30777550
Related