A Beginner's Tutorial to the CSS Grid (By Example!)

Key Takeaways

you hey everyone Gary Simon of course at Rome and today we're gonna be looking at the CSS grid now when I designed my very first layout in the mid-90s I remember using HTML like tables to structure the layouts with the aid of image slicing tools like fireworks then we moved to in lines and floats for quite some time and after that came flexbox and now we've arrived at the CSS grid now the CSS grid soft layout problems that no other CSS solutions can handle well so in this tutorial you're going to learn how to build a layout this one right here and get your feet wet with the CSS grid now remember this tutorial is really no way going to be comprehensive it will just serve as a quick starter that will hopefully facilitate your eagerness to explore the full potential of the CSS grid so this is the layout that we're gonna build I kept it pretty simple so that we can breeze through this with relative ease it's just a fictional layout meant to espouse some of my snobby libertarian views I like to mix things up so let's go ahead and get started oh but real quick before we begin make sure you check out my site course cetera com where you're gonna find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like a six pack each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on alright let's get back to it I have my code editor here Visual Studio code open with a 100% blank empty grid project folder so go ahead and create that and just open up whichever code it or you want and we're just going to keep things rule 16 and precise as possible so that means I can include any frameworks or build tools we're literally only going to work a single HTML file CSS and an image file so if you're watching this on YouTube make sure to visit the project the written version and that way you can just copy and paste the code under project setup that we're about to do so we're going to create a new file called index.html and I'm going to paste in this just very starting point over html5 so nothing really happening here except we're importing a source sans Pro font from google fonts and then also we're linking an index dot CSS file right here so let's go ahead and create that file as well let's keep that blank and then finally also go ahead and download a lead we're gonna have the single graphic it's that little icon that you saw earlier this is the URL actually right here s3 Amazon ad FS comm course cetera logo dot PNG that's all it is so make sure you save this somewhere just right click and save image as in your in the same project folder alright so here it is those are our three files so let's go ahead and start defining the actual HTML so we're gonna work here in the body tag and control B to get rid of that sidebar and coming up here we're just going to put in a header element with a simple link now ordinarily you would probably have you know a navigate a navigation of some sort alright but we're gonna keep things you know quick and easy and then also a div class of container and a div ID of content and then we're going to do an h1 down with a state and then also I'm going to copy and paste real quick just from the referenced HTML in the written tutorial so I don't have to type everything out this right here alright so it's very simple as you can see and this simply handles this section so this is the header and then this is the content section that we just added we have to add this as well though one second so after that we're just going to have a simple image source to our logo dot PNG alright then next we're just going to consider the stuff down here part of a footer so we'll wrap everything in a footer element and then we'll put it we'll just denote these as unordered list items all right and then I'm just going to paste a couple things really this is just filler text and then we'll just copy this actually copy just like this and I want to copy this and then make things easier actually we can just do this real quick copy it like that like that and then just copy these three I actually want to have six of them alright just like that so now let's collapse this whole thing all right so that's all the HTML is that we need to worry about so now let's focus on just fun you know defining some basic CSS rule sets and we're not going to mess with the CSS grid just yet we want to get the aesthetic stuff out of the way so by the way if we go hit control B right click reveal an explorer I can open this up and this is what it looks like so far without any CSS okay so let's go ahead and get started here now we're going to go to the index CSS file and I'm gonna do just instead of typing everything out just copy and paste from the reference written tutorial again this is the body we're just changed ending define or work in the background color margin zero blah blah blah we're going to reference the a elements the links again nothing exciting happening here in fact this is a little bit silly I'm just gonna paste the rest in here and you can see there's not too many just about forty three lines of rule sets you know we have our image here we have our header that we're setting to background color the container giving some padding footer background margin zero I don't you know nothing is really happening here too much see ya now let's get to the part where it's actually going to structure the layout so again at this point this is what our page looks like alright so obvious it doesn't really quite look like this yet you know this needs to float over here these need to float next to each other how do we do that using the new CSS grid okay so let's go ahead back to our code editor and before we do that though I wanted to kind of give a breakdown of what's happening in this layout so essentially we have this outer section here that's outlined in this yellow border and this is what we would place on in the and the container element which is container class the display grid property all right so that's how you define a grid it's very simple it used to be display inline or display block or display flex this is display grid now we have to ask ourselves next with inside of it what do we have in terms of you know our layout positioning well we have this section over here and then we have this little logo graphic over here so when it comes to the grid do you think in terms of columns and rows so this right here we just have one row going on and then we have two columns one and two so it's up to us up to us to use the specific grid rule sets to define what's happening here so let's go ahead and do that so the first step by the way just to look at the reference we have our div container then we have two child elements we have our content and our logo these are going to serve as both of our columns so to do this we find our container and we're going to say display grid save it and at this point what happens nothing it's because we have to add another property so that property is grid template columns all right so I'm going to put in for the first column a value of say 66% and by the way you can use any other of the other standard values and then for our second column which is the logo element I'm going to put in simply Auto so this defines two columns because we have two values separated by a space and then another value so let's go ahead and save this and see what happens there we go very very simple as you can see alright so what about this part down here everything's just kind of floating on top of each other yet we want to have reverted back here three columns with two rows alright so let's go back to our UL element because going back to our index we'll see we have our footer and then we have our UL the UL is probably or the unordered list element is where it makes most sense to place the display grid property on because we have our child elements inside of it so we're gonna put in display grid and then also grid template columns now we could just do because we want three remember and we want them of equal width auto auto auto and then also grid template Rose auto and auto now Rose of course we didn't have to add this one up here there's simply one row now grid template rows we want two of them so we split things up into two and what we'll do down here alright so now we can see we have these bullets we can remove that momentarily but we can see now they all float less like it looks a lot obviously closer to the mock-up very simple as you can see by the label let me add list-style-type:none alright so this right here isn't that little bit repetitive and this as well well there's a shorthand way and we can use repeat the number of times is the first parameter so we'll say three and then the value of what the we want them to be which is Auto do the same thing here repeat two Auto Save and you'll see we have the same result very very very very simple okay so going forward let's go ahead and take this element over here and Center it appropriately all right so the CSS grid allows children or items to be aligned quite easily and we can use justify self so coming back up to our image justify self and then where do you want it Center save and there we go all right so let's talk about nesting the CSS grid and template areas so you can of course it would be ridiculous if you couldn't nest the CSS grid so you can have grids within grids so let's do this by actually making the body element its own grid so here's what I mean we'll go back up here we're going to say display grid so now what's going to happen is the children of the body tag right here here and here we could see there's three of them are all now going to be affected by this body being a grid so let's also put in grid template columns Auto we're just going to have one and then we're going to have grid template rows we're going to have three of them because if you look we have one up here one right here and then one right here so we're going to put Auto for the first one which is the header 60% here and then 40% and then we're going to define area so grid template areas now this is going to look a little weird if you've never seen this before so we'll say header body and footer all right so what is happening here well basically this grid template areas allows us to position the various grid areas which we haven't yet defined by referring to their name in situating them in the value of this property so we have one right up here at the top this one and this one all right so in order for this to work we have to use the grid - area property on the actual children and give them the appropriate names so we do this we'll find our first one which is header we named it a header up here or we referred to it as header so we're gonna add grid area header now we have to take our container we're gonna call this one body and then we're gonna come down to our footer and this was grid area footer now if we save this you're gonna see not much will be changed actually nothing changes what happens however if we change we make our footer the header and we'll take the header at the bottom look at that that was previously never possible with just HTML and CSS so let's revert this and now let's I discuss the responsive CSS grid so this you this means using media queries and then using the grid to adjust things and properties so let's say for instance I on you know smaller mobile devices or whatever we wanted to change a grid template area or just change things around sometimes it does make sense to do that depending on how your layout situated so let's go ahead and then to just paste a media query right here this is saying that viewports at 500 pixels are smaller will say body and we'll take our grid template areas property and we'll say header before it was body I'm gonna say footer here is now and then body all right so let's save that we're gonna refresh its back how it was normally and we're gonna drag this in until we get to 500 pixels there we go awesome now this looks like crap obviously because these shouldn't be floating lefty to each other still so how do we fix that very simple well reference right here our under root list and container and we'll say grid template columns is auto grid template rows is auto as well and we'll save it let's refresh and scale it in and now they're all on top of each other because we define just one column in one row now let's go ahead and Center this text because it looks like crap come back and refresh and there we go and that is really all there is to it now however we have only just begun to touch the possibilities of the CSS grid there are plenty of other properties and values that give you an immense amount of control over your obviously more complex layouts so I suggest taking a look at this right here this is from CSS tricks snippets CSS complete guide grid and it gives you for instance basics and browser support this is real important and also down here properties for your parent which is the grid container or where you display grid and then properties for the children and you can see that there's quite a bit of them and there are some things obviously that we haven't touched on but this was just meant to be a real short and quick starter just to get your feet wet alright so hopefully this quick crash course will be enough to intrigue you going forward with the CSS grid