Material-UI Grid Breakpoints

Introduction

This is a tutorial on how to set breakpoints for your Material UI grid.
Breakpoints match with a certain screen width and depending on what value you set is how many cards will occupy the space given the amount of available space.

xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px

Here is a grid item from Material-UI:

<Grid item xs={A} sm={B} md={C} lg={D} xl={E}>
    <Paper className={classes.paper}>My Grid Item!</Paper>
</Grid>

Material-UI's grid is based on a 12 column system meaning the screen at any given point has 12 columns of available space. When you change a value at ABCDE it will tell the item, "Hey, let's take up X amount of columns with this one grid item at this breakpoint!" This allows us to set up the grid in so many unique ways based on how we set the values for each breakpoint. Below I will list out some examples and their output!

Here is a sandbox provided by Material-UI that you can play along in! Grid Sandbox (Remember to navigate to demo.js to change the values of the grid items.)

Examples

• In the above example we have the first row which is a grid item - xs(12) meaning it will always take all 12 of the columns at any screen size.
• The second row has two grid items - xs(12), sm(6) meaning at screen size small and larger (width: 600px+) each card will take up half the screen (2 cards x 6 columns each = 12 columns total) and at size x-small (width:0-600px) the card will take 12 columns, or the full screen.
• The third row has 4 grid items - xs(6), sm(3) meaning at screen size small and larger (width: 600px+) each card will take up 1/4th of the screen (4 cards x 3 columns each = 12 columns total) and at size x-small (width:0-600px) the card will take 6 columns, or half the screen.

NOTE: Even if you decrease the width of the grid in the above image, the third row will never only have 1 card in it, because it is programmed to always have 2 cards for an x-small screen. An example of compressing the width to a super small screen is below.

You also do not need to have the 12 columns equally distributed between the cards in the row. If you had a grid item - xs(12), sm(9) and another grid item - xs(12), sm(3), they will be able to share the same row and take up 9 columns and 3 columns respectively, here is an image of this below.

Take note, if you distribute your cards without adding to 12 columns, the cards will not full take up the row and you'll be left with some extra space on the right-hand side like below.

Author's Note: Thanks for reading, guys! I had a hard time find a good resource to learn how to create this grid and the explanation on Material-UI wasn't enough for me so after playing around on the sandbox I created my own tutorial! Enjoy!