mui-grid-system

This video is recommended for people who are building a react app with MUI.

Let's make a grid container, and let's make 3 colored grid items. This creates grid items with width and height equal to their contents.

<Grid container>
  <Grid item style={{ backgroundColor: "red" }}>
    red
  </Grid>
  <Grid item style={{ backgroundColor: "yellow" }}>
    yellow
  </Grid>
  <Grid item style={{ backgroundColor: "blue" }}>
    blue
  </Grid>
</Grid>

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

<Grid container>
  <Grid item style={{backgroundColor:"red", fontSize: 40}}>
      red
  </Grid>
  <Grid item style={{backgroundColor: "yellow"}}>
    yellow
  </Grid>
  <Grid item style={{backgroundColor: "blue"}}>
    blue
  </Grid>
</Grid>

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 container>
  <Grid item xs={2} style={{ backgroundColor: "red", fontSize: 40 }}>
    xs=2
  </Grid>
  <Grid item xs={4} style={{ backgroundColor: "yellow" }}>
    xs=4
  </Grid>
  <Grid item xs={6} style={{ backgroundColor: "blue" }}>
    xs=6
  </Grid>
</Grid>

If you remove the value of xs, each grid item will equally share the available space.

<Grid container>
  <Grid item xs style={{ backgroundColor: "red", fontSize: 40 }}>
    red
  </Grid>
  <Grid item xs style={{ backgroundColor: "yellow" }}>
    yellow
  </Grid>
  <Grid item xs style={{ backgroundColor: "blue" }}>
    blue
  </Grid>
</Grid>

This also means you can define the width of one item and the others will automatically resize around it.