Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, JSS and Sass variables and mixins, and dozens of predefined classes, properties and components.
How it works
Material-UI’s grid system uses a series of Grid components (restyled and renamed by Creative Tim to GridContainer and GridItem for easier usage) to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.