Material UI - Containers and Grids

hey what's going on in this tutorial we're gonna be talking about containers from material ui so let's just go ahead and get started and make a container so um if you wondering what's my package json and so far how it affects your app it's posted below the versions that i think are most relevant for uud for you to use let's come in here and do import container from there we go and so let's come in here and make a container we're going to put some content in here and so it doesn't look very special right now and that's fine the container all really does is like center your content and kind of keep it together as you go from you know a landscape to a portrait mode and vice versa and there's some interesting things that we could do here so let's come in here and let's do this let's give it a style background color and then let's make that equal to um let's just do blue i hope we got an error here oh there we go my bad sometimes when you're jumping in and out between work and then you do this you forget some of the syntax but it's no problem so we see here is we have the container all right cool awesome no big deal well let's come in here and let me show you first fluid now fluid is kind of interesting because what it does is as you expand the screen and you want to move it around you could it'll adjust up to a certain point um easily for you so we could do max with come up in here and then let's do extra small here so as we come in we could see that at the top there my dog's name is bernie see to a point see it's almost like it'll stretch out and kind of hang out with it but then it loses this point that means it's out of its bounds because out of the extra small so let's do large here and you see that it will in a very fluid manner fill it until it hits the what is considered its extra large bounds right here and then after that it's just sitting centered nicely in here which is kind of cool and so what i figured on most devices you'll want to have like a large or maybe dependent upon if you have very very specific you know tablet or phone views you know you could dynamically switch this out for whatever your content is but this is kind of a nice thing to know because as you can see just easily glides along and resizes your content up to that point that you need it which is really cool and so there's another way that we could work with this and that is we can make it fixed and fixed is um it's okay i don't know if i would ever want to use fixed but it's there just in case and so we could put fixed in here and what we could see is just like with the fluid measures there we go it's kind of like my dog learning uh how to walk you have to drag it for a while and then oh well at this point it doesn't follow only goes so big but we could see that it kind of snaps just as it kind of needs to whereas with the fluid motion it just follows along with it up to a given point and let's come in here and let's inspect element i may need to switch out edge here for something actually a lot better you know i'm just going to go ahead and do that one moment here all right let me slap this in and here we go let's go ahead and take this out let's go and inspect the element here and so what we see with this container even if it's not fixed right now and we know that it you know kind of snaps at the last second here one thing we could do is we could also rotate it from the portrait to landscape view and so even if we come up in here and do you know max with what we had before and let's just do i think md's for media miami autocorrect sends it to that that it's still in a very you know it's not being drugged so it's not imagine it's more useful in the desktop at that point but we can see it just appears where it needs to um on these different kind of views here so let's go to ipad let me drag this out a little bit we'll rotate it and yeah it just takes all that content that's in there and you know centers it between you know these two points out here and keeps it all within and so yeah that's pretty much containers all right so in this section we're going to be talking about grids grids kind of like containers are ways that you could um rather than a container probably being for a whole app with a grid what you could do is you could have parent grids and then nested grids and there are interesting ways to organize your information on the page so sometimes you have you know you want two things side by side and so it's a way for you to allocate that information that text those images those videos side by side and organize them in a nice easy manner and it also uses the css css flexbox as well which is nice so let's go ahead and go ahead and start making these let's go ahead and make a container here and i think it'll just be easiest to show this here then alrighty cool so then let's come into here and let's make two more grids to show we'll copy and paste that because we're lazy and because i think it's easier to do with the styles i don't know what you just use an ugly color i'm not submitting this to any competition here so you see i need a beer i need another paycheck and these are coexisting on the same line right now because we're not telling anything explicitly here that you know one thing needs to take up an entire line here or that we need to separate them so one way to do that is let's come in here and this is something common i see and let's just give the first one unsizes extra small going up that this takes up 12. and so we see here that this necessarily shoves everything on over and you can tell the difference here because look this entire line is reserved by this h1 element here saying i need a beer and this one down here still has you know it looks like about 50 taken up there but another item coexist down here because we allow it to so let's come in here and let's just do [Music] and we can see that we did in fact extend this here and that's pretty cool so now that we know how to share stuff on a line or we want to use one element to take up an entire line what if we wanted to work on the spacing between these two things say we wanted you know more padding and more of a gap in between there how do we do that and that's pretty easy so we'd go up to the parent grid up here we'd come in and it's automatically at two and it only goes from i believe 0 or 1 to 10 inclusively so if we wanted to do this i think that makes much of a difference here but let's do something dramatic using 10. well that really throws it off right there oh and i think the reason why is that we have to come in here in my bed and that for any child you're gonna need to make that um if i could spell here as an item there we go and so what you have here is that you have an item two item grids in a container grid so anytime you see item think child let me see container i think apparent and this 10 now is enforcing the 10 spacing gap between these two so let's go in and not screw this up and we see now that zero this is the smallest gap that this could produce you could go and write your own styles to maybe force this on up but this is what's happening out of the gate so this here two is kind of naturally how things work and fit there but if you wanted to do eight this is how the gap would look and that's how spacing works with material ui grids all right so in this part what we're going to be looking at is how you could use like the parent grid element and you could i would say stylize maybe the stylizing you could just move around the child elements here for the items so you notice that in the last section i believe i don't record these all in one day you have the extra small 12 or whatever it is we had or whatever it is you may have and you could say hey you know this i need a beer takes up the entire you know row right here and that's fine you could totally do that but if you wanted to you could come up here into the parent grid as long as you make sure you have the container in there because that's necessary for this you could come in here and you could do something like give this row let's just go to the center you go to the documentation and see this and play with it yourself but you know this is kind of a tutorial here so i kind of want to show you some of the cool things i think you can do with this so you come in here and this is a row obviously it's still row and the items and then the justification is all center all right fine whatever but this is kind of where the power i think is super cool we could actually flip these around and so we could see that i need another paycheck is now moved before i need a beer which is awesome because say you want to i don't know make a game you're using api and you're getting a lot of information and you want to have the user toggle what they're seeing this is cool because you don't have to like logically go through and write out what that looks like this is kind of baked in for you and so another thing you could do with the direction is you could do column actually that's wrong and then you could also see column reverse which is pretty cool so you could flip these up side down columnize them and that's just awesome because if you think about the work that you'd have to do in order to pull this off maybe for some of y'all you know you're like the you know top .01 of developers and you just like sneeze code and you're married to like a large computer or a server or something like that but for the rest of us you know me included this is kind of neat that you could just kind of pull this off and when your boss is like hey could you you know flip these items around or i have a whole list of things down here could you easily make them toggleable i guess would be the business term for that you could do stuff like that which is pretty cool another thing you could do is you could with the justify you could go to and i may have to change the column here but you could do space between and it does nothing but if we were to come back here into row we would see that there's a gap between here which is awesome we could also do something and justify like space around which puts gaps all the way around and then there's space evenly so every space here is you know evenly it's the same value which is neat and so align items we could do things like stretch you're not going to see it there the the material ui example in the docs is kind of cool because it kind of shows you a very robust way of using these but if we were just to do column we see what stretch does now um so rather than going here and do the xs equals 12 if i wanted to and not have you know just a ton of the attributes in here i could say all right i know for a fact that all these are just going to be boom boom boom boom boom a list going down let's just you know space these guys evenly out or however we want to do that i want them as a column which would mean a list and then i just want to stretch them so they take up the entire you know row which is cool because then you don't have to go and type this you know for every single one which is awesome and that is um doing that kind of the interactive portion i mean it's very light compared to what the material ui example is but sometimes i think it's a little too robust and this is kind of a for dummies introduction to it but leave some comments suggestions if you have any other you know recommendations or requests let me know

Channel: Jesus, Take the Compiler

Views: 4,250

Rating: 4.8545456 out of 5

Keywords: Material, UI, React UX, React UI, Material UI, React Material UI, React, Material-UI

Id: nR2Z-6MiroM

Length: 15min 2sec (902 seconds)

Published: Thu Sep 03 2020