How It Works: MUI Grid System

This tutorial is recommended for people who are building a React app with Material UI.

First, let’s look at the typical grid container, and make 3 colored grid items. This creates grid items with width and height equal to their contents.

For example, if you make the contents of the red grid item bigger, the item itself and it’s whole container’s height follows suit

For MUI, every screen is split into 12 different columns. By changing the xs property, you can tell each item how many columns you want it to cover.

<Grid item xs={2}> <Grid item xs={4}> <Grid item xs={6}>

If you remove the values for xs, each grid item will equally share the available space. If you define the width of one item and the others will automatically resize around it.

<Grid item xs> <Grid item xs> <Grid item xs>

<Grid item xs={2}> <Grid item xs> <Grid item xs>

If you exceed the total number of columns, don’t worry, it will just make a new row.

<Grid item xs={7}> <Grid item xs={4}> <Grid item xs={6}>

The property xs actually means for screen size of xs and above. This means you can define the behaviour of your grid items depending on the size of the screens. There are a total of 5 screen breakpoints you can choose from.

I recommend using xs to define your mobile screen behaviour, and sm to define behaviour for ipad screen sizes and above

That’s cool and all, but if you want to make a backend in 2 lines of code, you can check our open source package EzBackend. If that tickles your pickle, sign up for our alpha here.

Github Example: https://github.com/kapydev/mui-grid-system-tutorial
YouTube: https://youtu.be/1uarJ4fXjzw
Discord: https://discord.gg/kA8ZNwqR