DEV Community

0 seconds of 4 minutes, 36 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
04:36
 
Deeksha Sharma
Deeksha Sharma

Posted on

11 4

Learn about Material-UI Grid

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.

Check out the course trailer
Check out the course

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.
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!

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more