Layout breaks when Material Ui grid wrapped in div element

Question

I have responsive dashboard build with Material Ui Grid elements. And one of the grid items wrapped in div element which breaks the layout.

Here is playground with div element - https://codesandbox.io/s/basicgrid-material-demo-forked-pkkil?file=/demo.js

Here is playground without div element, and this how it should be with div - https://codesandbox.io/s/b1wsf?file=/demo.js

div element cannot be replaced or removed...

Any suggestions?

Answer 1

Mui Grid component is designed the way that Grid container should always be parent of Grid item prop. Grid container is cloning Grid item and passing to it additional configuration it is not based on react context.

Only sane way to get this working is to remove div.

Or provide custom css styles to this to emulate grid spacing.