Material UI Tutorial #10 - Grid System

Key Takeaways

all right then so now we're grabbing our data right here and we're outputting all of that data inside this notes component and we can see that in the browser right here but at the minute it doesn't look great and what i'd like to do is start to work on the layout a little bit now when it comes to layouts using material ui the main components we'd use are the grid components so material offers us a 12 column grid system based on flexbox and it's very simple to use so what i'm going to do is first of all import a couple of things at the top of this notes page the first one is going to be grid this is the grid component we're going to use to create a grid layout and then the second one is paper which we're going to use inside that grid and this is kind of like a very very simplistic card if you like it's meant to look like a piece of paper on the screen with a bit of elevation that's just to put our content inside so then down here let's do a simple example of this grid so we're going to use this grid component right here now there's two things we need when we're creating a grid layout the first one is a grid container that's like a wrapper around all of the elements inside the grid and then the second thing is grid items they're the things that are going to be laid out on the grid so first of all i'm going to create a grid container now that is just the grid component but we pass in a prop called container and that tells material ui that this is the container and now inside here we can place grid items so let's do that i'm going to say grid like so the same components this should be grid not good so grid and grid and then inside here we're just going to output the paper component like so and we'll output a number one now then what i'm going to do is copy this and paste it a few times down here so we have four items in total i'll change this to two this to three and this to four now i said that this should be a grid item this is a grid item as well and this and this so we have to say that these are grid items so i'm going to alt click all of these and pass in a prop to each one which is item so now we're saying these are all grid items things that are inside the grid container so if i save this now by default we get one two three four all next to each other and if we zoom in you can kind of see that paper component it's like a little bubble around the number with a drop shadow okay all right then so by default when we have a grid like this all it does is align them up left to right because without those they would go one on top of each other like these things right here but the default behavior of the grid is to put things next to each other in a row now at the minute they're all squashed up on the left and i want to make them into a grid so they take up the whole space of the page so that each one has an equal width on that page so how do we do this well we have to specify how many columns each grid item is going to take up now i said before that the grid is a 12 column grid system so we can distribute the columns between these four items so if we take 12 and divide that by four items i'd say three columns for each item right now the grid system is also responsive and we can specify how many columns each item takes up at different screen widths so for example i could say from medium sized screens and up that's md i would say i want this to take three columns up and i'm going to do the same for each one of these things so i'll copy it here and paste it here paste it here and paste it here and remember these break points are built in to material ui so on our screen at the minute each one of these now should have a column width of three columns so they should each take up a quarter of the page but it doesn't so let me just zoom out to normal size and that's why it was because i was zoomed in so now when we go to normal size we can see each one of these columns is taking up a quarter of the width of the screen right but when we get down to this kind of size which is less than medium then it's not showing those widths anymore the bunching back up on the left and that's because this grid system right here is saying that only for medium sized screens and up should it be three columns below that it reverts back to type now what i tend to do is start at the very smallest screen size and that is extra small and what i would do is say okay at this screen size i want each of these items to take up maybe 12 columns in width and that would be the whole width of the page because the grid is only 12 columns across so if i take this and paste it down in each one of these like so and save this what i'm going to do is move this down you can see each one of these now is taking up the whole width of the screen it's taking up all 12 columns on the grid but the minute we get to a medium-sized screen now it's going to break up so they all have three columns each instead and they sit next to each other so you can see how this grid system is responsive okay so let's also add in another breakpoint i'm going to say for each of these so i'll alt click to do it all at once for each of these i'm going to add the small break point and at small sized screens and up i'm going to say six columns so for extra small and up it would be 12 columns so the smallest size screen 12 columns when it gets to a small size screen which is a little bit larger it's going to be six columns so let me take this out a little bit we can see six columns now so six on the left and six on the right so there's two next to each other and then the other two automatically go down to the next row and then when it gets to medium sized screens it's going to go to three columns like that and that would be it then as far as we get out wide it's always going to be this width each column so we could also add in the large break points right here but we don't need to do that for our case i think this looks fine so that's how to use the grid system pretty simple right now what i want to do is comment out that example and instead i want to put these things in a grid right here so how do i do that well each of these items that were outputting for a note is going to be a grid item now remember around grid items we need a grid container so let's do a grid container around this thing first of all grid and we'll say container like so we'll take the closing grid tag and we'll paste it at the end over here and scoot this in now each of these things now needs to be a grid item so we'll say grid item like so and close this off over here grid okay cool so now let's take all of this stuff right here i'm going to cut that and i'm going to add in the paper components and paste it inside the paper just so it's elevated a little bit on the screen all right so this thing right here is still getting the key because it's the root element inside this map function right here but now it's a grid item now remember by default these should all sit next to each other now but we need to apply columns to them because they're all slightly different widths dependent on their width of the text so let's now go to this grid item and apply these different widths i'm going to say for extra small size screens it should be 12 columns and then for medium it's going to be six and then for large it's going to be four so let's give this a whirl so you can see if i make this into the largest screen we have three items next to each other because each one has four columns of width four plus four plus four is 12 and the next one goes to the next line down if we scoot this down when we get to a medium sized screen it's going to be six columns in width each one of these and then when we get to a smaller size screen all going to stack on top of each other okay cool so that's the grid system sorted and that's kind of the grid layout i want for this now there's one more thing i'm going to do and that is to turn this into a container instead so let me just change that down here as well and that should have auto imported at the top let me just check that yep import container from material ui core and we talked about this before all it does is apply a bit of margin and padding to the contents so let's preview this again and now we get a bit of margin and padding on the left and right cool so although that doesn't look great at the minutes it's the grid system set up at least and next we can start to work on these individual items and instead of using paper we're going to use the card component and i'll show you that next