<Box component="span">
  This is a box that acts like a span!
</Box>

Container

The Container component was my go-to when I was creating the main element that kicked off a new component. I like Container because it automatically centers in a page and it gives some white space off to either side of it. Another benefit of Material-UI is that it encourages mobile-first design, meaning that it encourages designing for mobile platforms and scaling up from there, rather than the other way around. Containers are really helpful for this mindset since they create a shape that's almost perfect for displaying information on a mobile device. Anyways, containers are created pretty much the same way boxes are:

<Container>
  Here is a container!
</Container>

The only other thing that I really used with containers is the disableGutters prop. Containers have padding on the left and right sides by default, and disableGutters removes that padding:

<Container disableGutters>
  Here is a container with no padding!
</Container>

Grid

In my experience, the Grid is generally going to be your most used component. Grid is based on the CSS FlexBox module, utilizing a 12-column grid-layout consisting of items and containers. So what this means is that a grid can be declared to be a container or an item. A container will hold other nested grids, and an item will go inside of a container. Grid items inside of a container can be assigned a size based on these 12 columns. As an example, lets look at something like this:

<Grid container>
  <Grid item xs={6}>
    Left!
  </Grid>
  <Grid item xs={6}>
    Right!
  </Grid>
</Grid

So this is a grid that contains two columns, a left column (Left!) and a right column (Right!). Each column will be exactly the same size, which is actually converted to a percent, or 50% and 50% in this case. Had it been four columns with xs={3}, each would be 25% of the total size. Had left been xs={9} while right was xs={3}, left would take up 75% of the container, with right taking up 25%. Theres one more thing going on here that we haven't talked about, and that is xs. This is part of the syntax that makes Material-UI a mobile-first framework. Specifically, it refers to the screen breakpoint, and it stands for extra small screen. xs is the lowest-priority breakpoint, and is followed by sm, md, lg, and xl. You can give an item multiple breakpoints. For example, if we change our code above to:

<Grid container>
  <Grid item xs={6} md={9}>
    Left!
  </Grid>
  <Grid item xs={6} md={3}>
    Right!
  </Grid>
</Grid

then that will change the sizing of our grids based on the width of the screen the user is viewing from. In our code above, left and right will be the same size as long as the users screen is 960px wide. At that point, the left grid item will take up 75% of the screen and the right grid item will take up 25% of the screen. This isn't a gradient, with the left slowly becoming larger. If a users screen is 959px wide, the left and the right grids will be the same size. Of course, you also don't have to declare a size for your grid components. If you choose to go this route, each grid item will take up the same amount of space. Alternatively, you can declare the size of only one (or any number) of grid items, and those that are undeclared will resize accordingly. For example:

<Grid container>
  <Grid item>
    Left!
  </Grid>
  <Grid item xs={6}>
    Middle!
  </Grid>
  <Grid item>
    Right!
  </Grid>
</Grid

In this code, our middle grid item will take up half of the possible space, leaving the other two to each take up 25%.

Conclusion

Material-UI is a powerful tool that can be used to style your React apps exactly the way you want them. The three main components are Box, Container, and Grid, but there are dozens of other components, such as buttons, forms, even avatar and navbar components. Hope you found this post helpful!