CSS Grid A Practical Example Part 2

welcome back guys if you're joining me from the first video you saw that we created this website using CSS grades and flexbox but it is not yet responsive one of the pros of using like those grid frameworks like bootstrap is responsive is some of the responsiveness comes out of the box but it's actually really really easy to do in CSS grid so let's go ahead and do that now I'm gonna grab the media queries for typical sizes from this website we're just going to do the non mobile version and it's put that into our responsive that sass file okay then I'm sorry indent is okay so what do I want to do so the first thing I want to do is a certain breakpoint I just want to make the container smaller so let's go ahead and do that on my time books so for this first breakpoint let's just do container max width instead of 1200 snake it 960 so that should make everything smaller ones we have two systems fine there you go first thing I want to do okay and I'm gonna do my mobile breakpoint at the second breakpoint which is well 992 I think so right I'm going to do in here you can do whatever you want I just feel like doing it in here so what is the first thing I want to be responsive let's make this stack these two things stack upon each other once it's that breakpoint so let's do that so if you remember we call and everything within the header the top now remember we displayed flexed this so let's just change the Flex direction because by default it's unroll let's change it to column and that should there you go what else I wanna do let's make a logo center so that logo margin Auto that did not work RJ in Auto that should Center the logo at that break point there you go it's also Center the menu origin let's give it some margin at the top and then we'll generate thing that see how that looks okay so when gets to like the smaller size actually too cramped so let let's change the width on that with 8% if that works should be more space now yes okay let's get to me what's next also I want this to stack so this is using CSS grid and we called it zero and before we had create template template columns we had it in halves like this but we wanted to start so we're just going to define one fraction and that should make it start if we resize our browser there you go like how simple is that and let's make it centered okay yeah and that was so easy I also want to just add some padding to the hero image just to give it some breathing room oh there's originally padding on let's just take that out and it's giving some margin I should be great there you go now for the featured section we want the same thing to have been here on our on our grid layout here so see header it's for the one called featured section dot featured section just give it some padding that's some padding when it gets to a certain size I think that's already there okay and let let's make the stack so it was called products right products and the grid template columns was in quarters like that but we wanted to stack so we can just give it one and I should stack there you go how simple is that if you want it to do halves and we just add one more in there then they'll be have awesome I just leave it to one and that looks good to me that this is really easy okay and let's just do it again for our blog section okay a featured section of their list is to our blog section blog section and we're going to stack them up again blog posts create template columns can we have thirds before and I'm just going to make it stack they should start there you go let's Center it awesome awesome and it's quickly fix the footer okay so the all sections done Twitter content has changed a flex direction to column flex directives flex Direction column that stack okay and that's just sign up made with marching on oh that's just under that okay and it's also center of this menu led to margins give it some padding on the top margin call and then bottle to Center it okay and we have to give it a width so let's go ahead and do that with 60% and that's just accept so yeah I have to be more specific here so I had to specify the footer elements there in order to get this to work so another practical use case for CSS grade is the ability to specify the order you want things to appear you would do that by naming your areas and using something called create template areas to specify what order you want them in let me show you with what I'm talking about with an example so this is a classic example say for example you want these blog posts to appear in a different order once it hits the responses eyes traditionally you can't do that without these of Metis JavaScript too that you can do in flexbox but let me show you how CSS grid does it so first thing you need to do is need to go your markup and name the items so it's just an ID on them equals blog one copy that and block 2 and block 3 ok the next thing we have to do is specify a name in our CSS file so let's go to our blog posts right here and it's target what the IDs we just put in there let's give them names and you do that by using this property grid area and its name it the same as the IDS of loved one and let us do the same for the other ones love two dogs three okay love three so okay we have names now and see what difference that makes spilled exercise okay see now you see that the layout is all messed up and they're all if you see closely they're all stacked upon each other because we need to specify the order we want them in once we give them a name so just if you do this properly get template areas and you actually lay it out the way you named it this will be the order that they appear in like the code is dictating how the layout should look like and that is really cool my opinion so it should be the way it was before block 1 block 2 block 3 and it's not why not plop 1 block 2 block 3 oh I forgot the damn semicolon okay they should work there you go now if you want in a different order all you have to do is change the name here to 3 1 1 and now that should appear in that order 2 3 1 awesome now this is also useful in your responsive where all you have to do and where my in the blog section blog posts specify the order you one here so grid template areas so we originally had it like this plug one o'clock one o'clock two o'clock three thirds so this is going to be in thirds when it's responsive we don't want that we want it to stack so we just let we just do something like that sorry it's not like that we have to put quotes on each line like that dot 1:12 - and blog three and don't forget that damn semicolon and then now that's going to start the way we want it to and you can specify whatever order you want again if you want two three one just change it based on the name and you can specify the order you want two three one there you go I think that's an awesome feature and I'll probably be using that whole time to give you one more example of that here's another use case where I think it's super useful this is a grid by example calm the examples here have a defining grid areas example let's just go into the code pen and here you can see it to put layout sidebar header content and we I've specified that layout see a dot means that you don't want anything there and you can see that so it's in thirds so let's go ahead and play with this let's make let's make it let's use FRS like FRS and that will span the whole width and let's go ahead and make a media query let's just do it at like 500 or something so what we want to happen is that a certain width traditionally it's going to stack and the sidebar is going to be on top and then I head underneath and then the content underneath but just make it so that the sidebar comes to the bottom let's go into that we can do this so all we have to do is the wrapper grab all that meat all of it we got okay so all we have to do is specify that it's just 1 and then bring this and then we can specify whatever order we want here so if you want the header header row for the reason if you want the sidebar in the middle and then the content and we can go ahead and do that it's awesome there you go oh sorry wrong breakpoint 500 okay so this is the original layout and if you get below 500 it's not going to work there you go sorry so here's the original if we make our browser smaller than 500 then the order is defined right here header sidebar content you can put this wherever you want once I bar at the bottom content in the middle and I think that's an awesome feature OCA smells great thank you so much for sticking with me I really appreciate your time I hope you learn something new about CSS grid flexbox or anything else I did in this video please subscribe if you are interested in this project I'm working on I'm going to sift through it and start recording videos when I can so yeah anyways thanks guys bye

Loading