0
200
ViewsMaterial UI Grid item not working properly
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?
2 answers
Answer question0
I copied your code to a CODE-SANDBOX and everything was fine there.
Here is the screenshot:
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.
0
!! 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.