Originally posted on https://youtu.be/9207OppzJU0
Code Sample from Material-UI Grid CodeSandbox
Below is the complete course to build beautiful and consistent apps using React and Material-UI.
Material UI provides a Grid system so that application is responsive or to say consistent across different screen sizes.
It supports 2 types of layouts.
Items placed inside the container. The widths of the item are fluid and sized in accordance with the parent. Items also have padding around them.
There are 5 breakpoints supported by Material UI Grid.
xs for mobile phones
sm for tablet devices
md for medium-sized desktop screens
lg for large screens &
xl for TV screens
These breakpoints can only be applied to Grid Items and not the containers.
If you have any further questions or need help, please reach us out!