Working with Grid System in Material-UI

Check out the course trailer at

Check out the course at

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 - Containers and 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.

xsMobile Phones
smTablet Devices
mdMedium-sized Desktop Screens
lgLarge Screens
xlTV 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!