React & Material UI #10: Grid & Grid Layout

hey everyone today we are going to be going over the most requested by far McCool UI component and that is the grid and how the grid layout works in material design it's pretty complex if you've never used a grid layout before and it's not that easy to work with so I've prepared some examples here for you and we're gonna go through the API nice and slowly and hopefully I'll give you a good understanding of how grid works and how you can use it to customize your layout for your application by the way if you find value in this video please please please consider leave your leaving a comment liking the video or subscribing it really helps the channel and it really helps with the YouTube algorithm to get my videos out there to more and more people so I can continue doing this so let's jump straight into the basics of how grid works the first thing you need to know is number one the grid layout is split into twelve different columns which is pretty standard for most UI library grid layouts and what that means is it pretty much what it does is it splits your screen or the screen that the user has when they're viewing their application or any container that you want into twelve equally sized quadrants and the second thing you need to know is the two basic components of grid one is known as a container and one is known as an item as you can see here if I were to inspect this code on Matilda's site we can see that you can define your grid and then you can either be a container or an item and each grid item has to be within a grid container now let's take a look at exactly what that means let's say this dark grey area that we have over here is the user screen it's what the user can see when they're on your website now I have this whole of this whole area can be said to be a container and the container works very similar to flex box if you've ever used flex box since in fact behind the hood we told you actually let me tell you I actually uses flex and what that means is the container is going to be split up into different rows and each row has 12 columns that I can fill an item can be sized anywhere from zero to twelve columns so for example here this big box over here that has XS equals 12 inside of it don't worry about the XS for now what the twelve means is this is a grid item and it is taking up all 12 spaces in this particular row of our container now if we look at the next row of the same container we have two items in here the first item takes up 6 out of the 12 spots in the container and the second item also takes up 6 out of the 12 spots in the container thus each of them share the row equally because 6 out of 12 is 50% so they both share 50% of the I of the of the spacing of the available columns within this specific row and then you can say the same thing down here for these other grid items which each take up 3 out of 12 which is 1/4 which is why all four of them can actually share this row equally now let's go ahead and edit this code take a look at what's happening underneath the hood now you'll see here if I go to demo Jas we have essentially one grid container and then a bunch of items in between here so let's go ahead and refresh this to see it loads properly and you'll see it's the same the only difference is the dark theme isn't coming through because the dark theme is actually set on the material by website level words this is just a code sandbox example but over here we can see that we have our grid item which is XS equals 12 like I said don't worry about the XS right now but 12 which means this item will take up 12 of the available columns on the row that it gets put on this item will take up 6 of the available columns on the road that is put on same with this one and those are those 2 items are there and then we have all of those 3 ones over here now what would happen if I removed two of these items that were taking up three spots and I put one of the six sized items in here instead well what happens is you'll see we have the two three items and then the sixth one that comes at the end pretty much as long as a row has elements adding up to at least 12 or at most 12 sorry then it will fit on the same row but as soon as I give this 7 we would see here that we would have two items that are 3 & 3 which is 6 and now the available space remaining for this row is six but our next item is an item that is size 7 so what it's gonna do is it's gonna put it on the next row because we don't have enough space to pop that in here so you can do really cool designs by making grid items at our size one and then you know four and then five and then two as long as it adds up to 12 and have things on the same row and then have everything passed that sort of just get pushed down now let's talk about what this excess means so if we go back to the default theme that Mattel UI has you'll see here that motoi has a couple custom breakpoints these breakpoints are labeled XS x sm m d LG and XL which is just extra small small medium large extra large and you'll see that the values of each of these sizings is pretty straight forward so for XS these values are in pixels by the way and XS screen is a screen that is from 0 pixels wide to 600 pixels wide and sm screen is any screen that is from 600 pixels wide to 960 and so on and so forth anything above 1920 as first screen size is considered XL so you'll see here we're saying on the grid item and if you look at the API you'll see that you can have a prop for every single one of those sizings we have XL XS and then I'm here we have SM MD and LG we're saying here for any screen size that is extra small and up we want this grid item to take up all 12 available spots in a row now if I were to make this SM equals 6 what is going to happen is on an extra small screen and let me go ahead and save that on an extra small screen now this is going to take up all 12 spots but as soon as the screen gets big enough that it is now in the SM category it is only going to take up 6 and the way these works are whenever you declare a sizing it will go for that size and everything bigger than it so when we declare XS equals 6 here that means everything bigger than XS will also be or sorry SM we'll also be six which means SM is 6 M D is 6 LG is 6 + XL o 6 unless I specifically state otherwise for example if I put LG equals like 4 here then from SM to LG it will be 6 and then LG plus it will be 4 and I think I'm really zoomed in right now so it's gonna be hard to get my screen to fit the LG but if i zoom out enough you'll see here that it takes up now because my screen is in considered LG it only takes up four spots and that's why this XS 6 is a lot to come up on this next row so it it might sound a bit complicated but when you start coding and when you start actually doing it it gets really nice because you'll also see if I resize the screen over here that these grid items will actually scale and even without any of these dynamic breakpoints so let me like remove this and make this equal to 6 you'll see here as I make it bigger smaller all of these grid items actually grow bigger with the screen so your layout will stay consistent and you can do a lot of cool mobile customizations as well using this so that's why I'm atole why is one of the best frameworks for yak because it's really easy to make a responsive website that looks amazing on desktop but also amazing on mobile as well so now let's get into some of the more intricate aspects of the grid now that you understand the basics one thing I want to talk about is this attribute spacing which if we go to the API will see that spacing we're to go spacing is down here you can give spacing a value anywhere from 0 to 10 now let's see what it would look like if instead of passing spacing here to this container as 3 if I passed it in instead as just nothing the default will be 0 so as you can see all of our grid items and I can make this a bit let's make this a bit easier to actually see by giving us a background color of let's say like red that hurts my eyes when I get blue and we can see here that what happens is all the great items stick together perfectly there's no space in between any of these grid items whereas before if I were to go back to our container spacing can only be used on a container and I say spacing is equal to three it will automatically add some spacing between all the grid items and it's really smart because you'll see that it also added spacing in between the bottom and top of these grid items as well yeah it didn't add any padding above this because there's no grid item above this there's no grid item above this specific grade item so spacing is actually done extremely well and these spacing values zero to ten actually correspond once again to the values you have in spacing in your actual in your actual theme if you set I think the default for material is four pixels so if you do three it'll give everything a spacing of three times four which is twelve PX in between all of your grid items and I think the maximum you can have here is ten so here's what it'll look like if we put ten to that you'll see things are very spaced out and it gives you a bit less room for your actual grid items as a whole now another really nice intricate thing to know about grid is that you can actually have a grid that is a container and an item and I'll show you an example of just a second but first we have to understand how Direction works so by default if we look at our direction problem by default our direction is row which means the grid items are going to try to be row by row and let's add some more spacing let's just set the spacing to just so it's easier to see and doesn't hurt our eyes and let's make the color white of the text so that's been nicer so we can see here that it aligns our grids are great items in rows whenever there is enough space to fit another grid item in a specific row it will put those grid items some by side in row now let's see what happens if I change it from a direction row which is the default two direction column and by the way this is also only Musa belong a container let's give this a directional column and see what happens BAM as you can see what it'll do is it'll split your screen up into columns now and every single item will be on its own column and it sort of looks a bit weird but essentially that's how it works so if you ever want to stack items on top of each other and this is the same as flexbox as columns you can do it like this now the cool part is each one of these columns can be a container in their own right so let's look at for example this first X s equals 6 let's change this to be XS equals 12 will change the naming so it's not confusing and we'll change this to be equals to 12 and then we'll give this a container attribute as well and B when we as soon as we give this a container attribute you'll see that it's sort of everything inside of it shrinks down now what we can do here is we can make more grid items and use the XS and the sizing the same way that we NAT that we would have used it in the actual in the previous example where we had row instead of direction so we can get make a grid item XS equals to 3 let's go ahead and do that and let's put this paper in here so you'll see here that now this will line up prettier and we can copy this over three times for four different items and you'll see here now this container even though the the overall container has a direction of column this container has a direction of row and you can have nested items inside of here and in fact each one of these items can also have nested containers and so on and so forth so if you wanted to for example create a layout for your website let's go ahead and do like a really really really basically out so let's say I want like so let's say I'm gonna have a header so I can make a grid item let's make a grid item X x equals 12 so it takes up the full width and let's make this a container and then I can be like oops and then in here let's have one items like grid item XS let's say equals like 2 and let's put some typography in here or let's just put some text alike welcome Anthony or something and then we can for example put on the other side we can have an empty grid item in here to add some spacing so let's sacred item 8 X x equals 8 and we could make that self-closing and then another grid item XS equals 2 so this will be on the far right of this and by the way there's better ways to do that which we'll go into in just a second but this is just to illustrate how you can use it to create that item accessible to so you'll notice that this 8 2 & 2 add up to 12 and we could put like a log out button or a log out text here I'm not sure why code sandbox isn't Auto formatting this code for me I don't know if I miss some syntax somewhere so let's go ahead and look through oh yeah it looks like I accidentally copied this over twice okay so there we go so by using the spacing we've sort of pushed we've pushed these two things to the opposite sides of the screen and see as I got bigger and smaller they sort of always go there now let's say I wanted something else another section so I can do another grid item and this is in our main grid right now we can say XS tools 12 again and let's say like this is just for example maybe just like a line or something just for simplicity sake and then we can have another grid item and then this will contain or in fact let's import typography let's import divider for divider from / divider we can get rid of paper and instead of this line let's actually do a divider so this divider could like for example separate our content and then down here we'll add another container and then in here we could add more content so grid item X s equals like let's say six and then it's say something like you know whatever whatever we want to whatever type of content you would want to display here so like let's say if there's just some like random text Laura let's just get a bunch of this text just like display that here oops and then we can do the same thing again down here and you see that this text is sort of split and we can even make this look a bit nicer by adding some spacing let's give the spacing of two so that these are spaced out of it and there you go so this is how you can sort of structure a website and make a layout out of it by just constantly using grids within each other and then you get to the final part of grid which is all the justifying the aligning and the aligned content so this is really for if you're trying to for example Center items or change the way an item looks when you actually display it inside so this stuff is the exact same way as the exact same as you would have it in Flex box if you use flexbox the way I like to do it is I like to sort of inspect element when I was first beginning and I didn't have a great understanding about grid you can click on the div that has a grid and you can do for example like align items and then like I can like just click my arrow key and go down I don't know if you guys can see that let me zoom in a tiny bit I can click my arrow key and go down and see what is actually changing and I can even if I want to Center something I can type in Center and go down this list to see what actually has a change that works so for example if I come to here I'll see that when I have a line a line content and a line items the center it doesn't really do anything but if I have a line self-centred then it will align everything inside of it to be centered as well so this is like a quick and cheap and sort of easy way to to learn how to to learn how to use these attributes if you're not familiar with Flex box and that's how I mostly used to do it when I was starting out as well and yeah that is pretty much how grid works I hope you guys found value in this video please consider if you did leaving a comment liking or subscribing it really helps with the algorithm and it really helps the channel grow please leave any suggestions on any other matil UI topics you would like to learn if I didn't go and thoroughly enough please let me know and I'll answer any questions in the comment and I hope everyone staying safe and has an amazing day

Channel: Anthony Sistilli

Views: 83,826

Rating: 4.9880381 out of 5

Keywords: material ui, material ui and react tutorial, material ui beginner, material ui code, material ui react, material ui tutorial, react material ui, material ui grid, material ui grid tutorial, material ui grid react, mui grid example, mui grid flex, react grid layout, react grid tutorial, react grid system, material ui grid system, material ui grid layout, material ui grid layout examples, material ui react grid, material ui react grid example, 12 column grid web design

Id: WV6u_6ZNWkQ

Length: 18min 9sec (1089 seconds)

Published: Sat Apr 11 2020