Grid
MUI grid is a powerful mobile-first flexbox grid which helps you build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, and dozens of predefined classes.
Breakpoints
We’ve changed the default MUI breakpoints with the following:
If you want to change the breakpoints you can use the following file: /assets/theme/base/breakpoints.js
Grid
The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
Grid Container
On the Grid element from MUI, you need to setcontainer prop. You can leave it like so, or you can set like container={true}. The component will have the flex container behavior. You should be wrapping items with a container always.
Grid Item
On the Grid element from MUI, you need to setitem prop. You can leave it like so, or you can set likeitem={true}. The component will have the flex item behavior. You should be wrapping items with a container always.
Please read more about the Grid on the official MUI documentation: Grid