CSS Grid A Practical Example Part 1

what's up guys Andre here and today I wanted to show you guys a practical example of using CSS grid for a typical website layout now I came across this video where the speaker is super excited about CSS grade he hikes it up a lot it got me really excited about it and maybe want to try it out definitely give it a watch I'll put the link in the description below after that I spent some time doing more research I went to this website grid by example.com by Rachel Andrew and it's pretty much the holy grail of examples of CSS grid definitely go here and play around with the examples that you find after that I did more research on the youtubes I came across these really good videos where they're actually going through the code and showing how CSS code works definitely give these to a watch I will link those in the description as well and after this I want to try it out on my own projects luckily for me I had a project that I was actually working on here it is right here and it's just a ecommerce demo using laravel that has a whole bunch of different products a whole bunch of different categories a shopping cart checkout system with stripe and actually there's actually a whole bunch of pages here that I've mocked up in sketch and originally I wasn't going to record this as a screencast I was just going to do it and then maybe give an overview of it when it was done but I think this is a perfect example perfect use case for using CSS grid so yeah we're going to go ahead and and use this as an example and you CSS grid wherever I can now before we get into our markup we need to have an idea of how to structure our HTML so let's go ahead and do that here you can see my design here and it's a typical 12 column layout and here's how I ended in structuring it so the top this is going to be a header because we need the background that encompasses the entire thing within the header we'll have a top nav and within the nav we'll have a logo and we'll have the actual menu for this I'll be using flexbox because flexbox is good for aligning items like that in this in this way we'll get to that when we get to the CSS this will be the hero section and within the hero section I'll have something called hero copy and hero image stuff for this hero we'll use CSS squid for this and we don't have to we can just use something like flexbox or the traditional way but i want to play around with CSS great and see how it makes me feel for this section we'll call this will call this featured and this isn't anything too crazy going on here there's some tabs here but maybe I'll just structure them as buttons to save time like this here's another use case level.you CSS great typical for columns and we'll definitely make use of CSS great there this is a blog section again nothing too crazy and we'll make use of CSS grid here as well and then down here is pretty much like the top nav will you select box to align these items so yeah that's what I envisioned my head let's go ahead and get coding so I'm going to be using laravel for this example you don't have to use level I just use it because it makes everything easier for me I'm pretty much just jumping between two files so it should be easier it should be easy to follow along even if you're not using variable so this is a fresh installation the only thing I've done is out of the images here so you guys don't have to watch me slice it up and here's how it looks in the browser nothing fancy let's go ahead and remove that and get started so it's called a CSS great example we don't need the fonts you don't need the Styles not sure is that and we don't need anything yeah okay so let's just make sure that it's working okay so that let's get started so the first thing I wanted to do was the header and then within the header will have a top knob on the top nav will have a logo and a menu okay so let's go ahead and do that so header and then I think then one of the top nav and I also want that to be constrained within container so we'll add a container and then from but in there I want a a logo I think and then the title we don't have an actual local so we'll just put psi squared example and then from there I'm going to want a ul right yes what I want yes hey let's see how many it was there and it goes for and it's just two that I'm going to shop I'm actually looking at my other monitor right now which already has done to make things faster so okay quick ninja edit I was using M it incorrectly and this should be the structure where each Li should have an anchor tag within it sorry okay so close the UL that's because what one thing I like to do is I like to close I like to comment at the closing tag it makes it easier to to scroll through I would see something like that and then what is next okay so I believe the next part we wanted to do this hero and from within that we have a hero copy and a hero image so let's go ahead and do that so by right so and top now okay so let's call it hero and it's also constrained by a container and the hero coffee goes no left and just put h1 CSS great example and it's just name it a practical example of using CSS squared for a typical website layout let's get to me let's scroll up here and a good example little copy and then we have some buttons slide you have some buttons here right here so let's make a container for the buttons slim it here Oh buttons and we'll do it's the anchor tag and we'll give a class button put in white because they're going to be white buttons first button let's go to button one and then second button you just copy it and in button - okay and that should be it for that section and here we'll copy and in the next section should be the hero image hero image let's see it's just an image things image that's MacBook curl there well PNG and hero image let's see if that actually came up in the browser okay because let's continue what is next I think that's it for the hero so let's end the hero and the hero and let's end up the header ok looks good to me so that that was just this whole section here so let's get into the featured section so this whole section here let's go ahead and do that and okay let's name it featured section let us scroll down so you guys can see it okay so let's just within the container and there's an h1 in there that just has the title we're going to Center it if you guys if you guys want are wondering why I know what class to put again I'm looking at the other monitor so enough to keep switching back and forth and also to save time that's just going to be a class that obviously centers it and then underneath that we'll have a description I also had a class on that called section description and some lorem ipsum in there and then we want this is where the tabs are supposed to go but I want to spend a time styling tabs so we'll just make another button container and a class equals button and I think is featured and what I just copy that line on sale these are these two buttons right here that these two buns right here okay so now this is where sorry I keep going to the bottom of the screen this is where we're going to use right here CSS grid as our container so let's go ahead and do that so let's name it products so that's going to be your grid container or CSS grid container that's also has a class of Tech Center because it's going to be centered and then within each we're going to have a product right that makes sense and then each product is going to have has an image it has a name and I has a price we're just going to do that so has an image which should be clickable so we'll make the link image source equals image slash my curled up PNG comic and then from here we get another this is going to be the name of the product product okay and we'll have my ninja edit that should actually be a div and the price product price was it 24 24 and 99.9 okay so there are eight items one two three three up to eight items so let's repeat that eight times just copy it and two three four five six seven eight and that should end the products they're saying yeah so in geo and products next there's another button container here it has the view more products button so it'd be text center a button would container any class because button and it's called view more products okay and this end the container I believe II over I'm missing a div here where's the end of the container now they should not be here Shh should be down here there you go they should end the container I think all this should be indented yes okay they should end a container yeah she goes that's why I think it's good to have comments like this and container and this ends the product the features a double section okay and featured section okay what is next so that was just all this stuff and this container here let's quickly do this vlog section here pretty much almost the same as the product section box section where we have a container and from our blog and peanuts section description 130 or however many words that is okay so that was just lip section right here and the next section is going to be using CSS grid as well let's go and do that container okay so right here it will be called blog post stuff blog posts and each one should have a blog post so from blog post and just like products should be a and then an image image slash log one dot PNG log image and then what's next have a title should also be clickable so there should be an h2 put across a blog title blog post title one and should have a blog description blog description let's just make it lower twelve or something so that is one blog post and let's repeat that blog post is going to be a great container and we'll just our great items would be these so there's three blog posts yes and I should be it actually our posts and blog posts they should be in the container and they should end the vlog section okay and let's quickly do the footer footer s footer there's just do it quickly footer footer content container and the first section I think I called it made width and I have text made with this is the heart icon F am using font awesome I'm going to use font awesome aid with heart by me and then the other section is just the menu or I should have that's good watch do it manually and I follow me and then a lie a times four times for that Network I would still manually a and again more icons class equals fa fa globe and three more times one two three fa fa globe expose YouTube next one is github and x1 is Twitter revolution and Twitter content and footer content and yeah that should end the markup section sorry it took so long try to do as fast as I could and this is what it looks like with zero styles so if you continue with me let's move on to the CSS part so let's move on CSS I've done some boilerplate here and I will go over what I did is trying to save time off the video who fonts I'm using one Surat and Roboto in my design font awesome just from a CDN compiled Styles app dot CSS and I'm also going to do some responsive stuff later on here is our sass file now full disclosure I don't wanna make this video about how to architect your sass usually I would put this in two different sections like for example will help enforce a outs will happen to typography you will have one four variables all that good stuff but for the purposes of demonstration I'm going to do everything in one file so I'm just importing reset here you can just import that the traditional way if you like variables all my variables here just using box-sizing border box for everything body again just specifying what fonts I'm using and some font size font weight and line height so resetting the anchor tags here myself defining the styles for my headings some more spacing stuff with the headings here max withing the image for responsive stuff and this is my text centered utility class which aligns it to the center and one more thing I'm running a watcher to compile my sass and getting label mixed if you're interested in using that so yeah let's get let me show you how it looks in the browser that's how it looks in the browser after all these boilerplate Styles I put in so let us style this let's go alright so the first thing I do is I had a container so let's do that so the max with these days desktop is around 1200 pixels and we'll also march in all of that see how that looks like change the container you do anything I'll note that anything but container okay we'll continue anyways okay what's next what I want to do next okay there you go that did it let's go to my design and see what's up okay I want to start with this top nap over here like I said I was gonna use flexbox for this because flexbox is good at the lining items like this so what am I going to do here actually let me start with the background so let's go do that okay so it's called header and the background is image triangles it's an SVG and background size we're going to cover it and color is white most of the stuff in the header it has a white text so we'll just define it in there and see if that worked okay that worked okay let's continue what is next also like I said I want to do the top man which is flexbox for that so calm have we're going to display flex so see what that does that's going to push this up here this thing should be up here when i refresh yes and we want this to the left and we want this to the right so the easiest way to do that in Flex box is to to see justify content space between and that should push that menu to the right if I'm not mistaken yes awesome okay let us continue what's next it's just padding here padding on the top I just put some padding yeah okay and what's next we are gonna style this logo leave us called logo again this is we're going to use some nesting here might get a little hairy don't take this video as a way to write good CSS fold a concise final 20 X close she can't work okay what's next I want to create a spark on this menu now you should name it but I'm not gonna name it I'm just going to target it to you well so this is also going to be a Flex container and the items will be there it's a display flex okay and where am I text text rokform uppercase I wait to have text on the bottom okay testing for uppercase so I should do that and I also want to justify the content space between as well so that's not gonna put spacing until I put a width there so let's do something like forty percent or something I should do it there you go well that looks good to me what is next okay so we're going to style menu items themselves just target to eight again it's getting pretty nested so I should put names in here color I have a variable named white which is not actually fully white and it's just to the hover state here color dark and white ten percent or something okay that works okay looks good to me let's move on to something else it's getting pretty nasty do not do as I say not as I do okay what is next what is next what is next okay let's move on to the hero section here so finally we're going to start using CSS grid finally let's go so let's target that zero and it's going to be CSS grid so the way we do that is the same as flexbox except we say display grid instead of display flex and in the design you can see that it's pretty much 6 columns 1 2 3 4 5 6 1 2 3 so about 6 & 6 so the way we do that in CSS grid is we do something called grid template columns and we can specify the width I like to use some fun are unit called fractions I think it's temper fractions so the way this works is it's just saying that each column should be half each like a total of 2 and each is 1 so 1/2 so as you see what I did so this should have moved this to the side there you go see how easy that was and I think that's it reads well if you see that it's a grid and it's separated into two equal column lengths I know you can using flexbox or it uses traditionally but I think this is very semantic and describes was doing better than the rest of them another property we can use is called grid gap which has lets you specify the gap of the grids I have a variable of they're just using 30 pixels you won't see too much difference here yeah it just push it over a bit and I just have some padding here adding and cutting bottom this is just spacing that I've already played with so don't worry about that okay what's next I also want to push the hero image a bit to the left so I have some padding out there 60 I mean a bit to the right sorry okay what's the next like I want to solve this next they ate this thing right here so that's the h1 on size is 52 and margin-top is 50 so I move it down a bit because that's how my design looks down down there we go mm what's next I think next to this that's again more spacing I have already done this I already played around the values so you don't have to watch me 0 68 pixels okay what is that - yes this pushes down and now I want to style the buttons here so let's go ahead and do that ended up here again if I was doing it properly not properly but I would probably put in like a components not fast hours and then like that our buttons that's as well but let's just do it border one pixel solid and I believe I'm just using the same is just X color for pixels it's also do the hover state and hover color white background text color I see those buttons look okay now we just have to and specify the button right also have a button white override slow styles border one pixel solid point cover white yeah sorry there's no specificity issues here so I got to use important and it's also be the hover color text color potent background what okay I should style the box refresh let's go is way matter what data however like Atari oh hey oh that way that wait that should not make a difference though we really have to do this ever there's an error somewhere oh there's the error all right I should do it there you go okay I also want to put a space sort of in here so let's do that back down here and it's just good space button margin right 14 this thing not just put the space there you go looking good is looking good we made use of CSS grid here I know I gave you I know we didn't have to but I'm using it so I'll move on to the next section okay let's call the featured section I remember correctly let's go ahead and work on that this end here oh so in a section called future section okay again just some spacing here okay and so I'm not gonna bother saving that okay so products is also our Greek container so this right here this right here is also every container so let's go ahead and do that as well products okay we're going to do display grid and it is in quarters so our grid template columns is four so we'll do this four times one fraction and that should give you four columns like that is in my mind if you're teaching someone CSS for the first time ever I think this is the best way to go about doing it I mean if you teach them that the old way and floats and stuff like that they're going to be confused flex boxes all right but you still have to wrap your mind around how flex box works I think this again this is the most semantics and it is fabulous what it's trying to do so let's go ahead and do that back to our browser and pick back up a grid our nicely lined what happens here okay let's fix this this is what my name is I think I named it section description so let's go ahead and spell that if you look at design it's actually not full width so let's do that again when I put it up here is all my components are supposed to be public liner components that I've found but I am being a bad developer today I will put it right under the buttons section description so like I said it's not full width it is about 8% you stop eyeballing it and we'll margin all of that so it goes to the center and see how that looks there you go that's better and what's going on here the button container I believe this with a button container look yes but in container well let's just put some padding around there margin if you will right just put it right underneath yeah its margin is dead button container margin 80 and 0 hopefully the spaces is out yes that looks nice featured on sale excellent and we have our nice grid here I'm not going to style this right now this is just polishing it up I'll do that outside the recording that looks good if we wanted a block section okay back to after zero the feature section okay so let's make a blog section the blog section so this actually has a design actually has a light grey background so let's go into that background light gray background actually has a sub border as well so one pixel solid and I also have a variable for that as well separate tour color and let's give some tiling adding 50 pixels 0 okay so yeah that looks okay Oh is there what is the error I do not see the error step alright I'm not sure if I spelled a correct separate separate may okay successful okay well that's not going to change anything there which is the color okay let us go ahead and style again we're going to get a squid here we're going to do thirds this time so let's go and do that so the containers name was blog posts and then we're going to display grid and we're going to do grid template columns and thirds how semantics is that grade gap cutter and that should have done in 32 see now boom thirds like that's beautiful but you know that let me show you an alternate syntax for this if it gets too long like say you're doing six or more you can just do this repeat three times the unit that should do it same to same thing so let's give same yeah we just put the comment in here so see what's going on okay what's next I just give some spacing 60 pixels 0 60 pixels there you go looking good looking good and again you can spend some time and polish yourself but the video is getting pretty long so let's just quickly do the footer and I'll be the end of the first video I will do responsive stuff in another video so let's just screen prints creepy grey background color white padding forty pixels and zero again that should do much put the color in there I think the background color okey and let us do the footer content again I will be using flexbox here same as in the the header that pop up stay flex justify content space between so that will move this crap to the right yep and will also flex this so what did I mean that I named it footer content no no it's just a ul it affects justify content so I content space between okay okay again this is not going to space out until you give it away so let's give it a width of 30% awesome awesome and it's just make the color of that white there the anchor tags color white no no this white awesome okay so that looks pretty good to me this is how I used both CSS grid and flexbox in my mock-up to slice it up into a working web page it looks good to me in the next video if you stick with me it's not responsive yet but CSS great actually makes it really easy to make everything responsive so yeah please stick with me and watch how that works out Thanks