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