Intro to CSS Grid - Create a Basic Layout - Web Design Tutorial

hey guys hey going in this video I'm going to be showing you how to use CSS grid in order to create a basic layout just like this for your web projects so this video is intended for people who are just starting out using CSS grid and basically I'm going to be covering most of the main features so that you can get started and of course start implementing a CSS grid for your own web projects so this right here is the basic layouts we have a header we have some content sections and we have of course the footer so basically this layout is going to support this right here so this sort of two column content layout as well as a three column content layout just like this so there's a small change in the CSS in order to transform this right here into this right here so of course you can choose which one suits your scenario better so anyway let's go inside this HTML file right here we're gonna start from scratch to create that layout so inside the text editor it looks something like this it is a plain HTML skeleton so first to get started we need to of course specify HTML so let's create a container so a div with a class of container for the actual grid container so then inside the CSS let's just firstly target the body and set a margin of zero to remove the default margin this way I can say container so tighter the class of container and say width and make this 100 review port week and for the height we can say 100 and viewport height and of course the combination of these three means that the container is going to take up the entire width and height of the web page so now saving this and refreshing inside the dev tools if I was to hover over the container we can see it spans the entire width and the height of the available viewing area I'm also just going to go back inside here and specify some font styling to make things easier for us to read so font-family let's make this quick sand with sand sir and for the font weight let's make this bold and also a font size of something like 20 pixels so now that is all set so we can now move on to actually using a CSS grid so for this we need to firstly specify that our container is gonna be a grid or a grid container for this we can say display and make this grid so now we are ready to start adding some grid items or at least specify our layer so now I just want to go back to the previous layout right here because I now of course our grid right here is ready to actually be used we need to specify the amount of columns and the amount of rows and also their sizes for our base layer that's basically how grid works you've got this base grid layer of rows and columns in the background and then once your layout is complete you can say that certain elements are going to span multiple rows or multiple columns or even a combination of the two so with that being said let's go back to this example and analyze and take a look at our columns and rows for this layer as we can see here in terms of rows we've got four rows in total we've got one row we've got two rows three rows and then four rows okay even though this content right here is spanning multiple rows we still consider this to have a total of 4 rows 1 2 3 and then 4 in terms of columns this actually has three columns even though two are visible we've got one we've got two and we've got three that's easier to explain on this example right here with the three column layer one two and three so with that being said this is a four by three layer which means we can specify this in the CSS for our example or this right here so in the CSS let's hop inside the container and we're gonna say down here grid template columns and this right here lets us specify the amount of columns and also their sizes so we're going to say 1 FR 1 FR and then 1 FR so here we're specifying three columns since we have three values separated by a space and the width of those columns is one fraction of the total remaining space so basically we've got three evenly spaced columns which are going to shrink in size as we shrink our browser because it is a fraction of the available space okay and that is all for the columns if you wanted to simplify this declaration you could instead save repeats then 3 and then your value so 1 fr and basically doing this is the exact same as saying what if I wanna fire and then one afar so now we can specify the amount of rows for this we're gonna say grid template rows in a very similar way and for this it's going to be a bit more complicated but not too much so let's go back in the example and we can see right here of course got the 4 rows the header row is 50 pixels in height ok these two right here are gonna be the same height but they're gonna be once again a fraction of the available space and the bottom one here is 100 pixels fixed so essentially the top and the and the actual bottom rows are going to be fixed heights of 50 and 100 pixels and these two are gonna be a fraction of the left or remaining space which means if I was to shrink this browser height we can see that only the two middle rows are changing their height the header and footer remain fixed so for this let's go back inside here we're going to say 50 pixels for the first row and then one fr or one fr and then 100 pixels for the bottom row of course these two are absolutes and these two are fractional and they can shrink if they need to when the browser resizes so now we've specified the columns and the rows I can save this and then refresh the browser inside the dev tools if I was to hover over the container we can see that Chrome gives us a representation of our layer of course we can see we have all of our rows and columns working perfectly fine so now we can move on to specifying a gap between each one of our areas here so for this it is very straightforward we can simply say gap and make these 10 pixels for example saving this and refreshing gives us this right here of course a 10 pixels gap excluding the edges of the container if you wanted to add a 10 pixels gap on the edges this can be done using padding and then box-sizing let's go back inside here and do that so we can say paddle make this 10 pixels the same as the actual gap size and box sizing our border box to contain the padding as being part of the total width of the container let's save this and now we have this right here which is identical to our container in both of these two examples so now essentially we are finished with the container I do want to go back inside here and just add a new rule set for container and then do so I'm gonna say padding here and make these 10 pixels and say border at 1 pixel solid and then a black so now essentially every great item so header and all the content and the footer each one of those divs are gonna have a border I'm sorry I can actually see how they look and how many rows and columns they span so now so now let's move on to creating the header we can make a new div with a I'll slap it on and just say head up as the content so now if I save this and refresh we can see that the header is taking up a single column and a single row in terms of its size okay so to make the head a spend the remaining rows so row number sorry our column so column number two and column number three this can be done using the grid column start and the grid column end properties so let's go inside here and I'm gonna say for the class file header reads poem start and make this one and say grids column end and make this four so to explain what the one and the four means basically here you're specifying the grid line number so a grid line is basically alliance between your rows and your columns so I'm gonna be showing you what that means right now so in the browser as we can see here we've got a total of four grid lines on the horizontal sorry on the vertical axis we have right here at the edge this is grid line number one we then have grid line number two right here and then grid line number three just about here and then line number four just about here okay that's very important to understand when it comes to making your items span multiple rows or multiple columns the same goes for the horizontal axis okay we of course have grid line number one just up here okay number two and then of course number three number four and then number five just down here so that is what our main bar grid lines so when I specify a grid column start at one and end before I mean that the header is gonna start at number one add fish number four so now saving this and refreshing gives us this right here for further clarification if I make this grid column end se3 save this and refresh we can see now it goes to 3 so 1 2 and then 3 ok so perfect so let's just set this back to be 4 yeah so now we can move on to creating the content right here so this is where I'm gonna I'm gonna first show you how to do these two columns for this content number 1 and then after that I'll be showing you how to change that so it actually expands so I so actually spans two rows and then two columns just like this one okay so back inside here let's specify our two more elements for each one of those content areas so I can say right here a class of content - large and we can say right here content number one and make this a and then make this B so with this right here if I save this and refresh we can see it is successfully flowed across to the second row and the actual items themselves are once again taking up a single piece of area so single row in a single column okay so now we're gonna simply in a very similar way to the header we're gonna make these to span multiple rows so you may have guessed we're going to be using the grid row start and the grid row ends to achieve that let's target the content large class and make this breed a row start we can make it start of course at number two and a grid the row ends and this time I'm going to be using span - so basically span - is an alternative to specifying an actual grid line number and let's just save this and refresh we can see we get this result right here so of course the grid row start was two so this second grid line right here and we used span so when I said span - it basically means we're going to start here then span two lines of course span we have line number three right here and then line that before just down here so started two and then span two gives us this result but here of course as an alternative I could simply just say fall instead of using the span to it works the exact same way it saved this refresh and of course we get no different so I'll just set this back to being span two so now if we want to make this so this single content our spans also you know this second column here just like this one this can be done quite easily I'm just going to be removing this second content item and making this simply content number one so now we can go inside here and we can also say grid column start and make this one and then grids column end and make this three so essentially we're combining both the grid row and the greedy column so now I'll save this and refresh and we can see right here we start at column number one and we finish at column number three right here and of course the row spanning is still in effect so now we get this large box spanning multiple rows and then multiple columns so now moving on to the tiny boxes on the right side here this is going to be very straightforward we're gonna simply create two more elements so content small and also content small adjust here and for this we can say content number two and then content number three save this and of course these ones also flow naturally so they're in the correct spot and that is awfully small content items so for the foot out it's gonna work in the same way as they head out but I'm gonna be showing you a different way to specify your column spans so back inside here let's create the element for the footer so with their class of just like this and this CSS rule says four footer is gonna say greet - Poland and we're gonna say one forward slash and then spam to read so for this this is basically just shorthand for saying grid column starts at one and grid column end at span three so basically this right here is the equivalent to this right here you separate your start and your end with a forward slash so now saving this and refreshing is gonna give us this result right here exactly what we want I might just go back and make this actually save footer so one last thing I want to show you is going to be the combination of the grid templates on the container in a very similar way as we did right here so for this we can simply say grid template and we're going to firstly specify the row so basically this guy right here then a forward slash and then say repeats three 1fr just like this so now this right here in a similar way to this one this is the exact same as saying this right here it is simply just a shorthand so now getting rid of this is going to give us the exact same result let's save this and refresh and we can see about he of course we get the same result and that's how to create a basic layer from scratch using CSS grid thanks for watching guys and I'll see you later

Channel: dcode

Views: 78,659

Rating: 4.9532413 out of 5

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, app, application, html, html5, css, css3, grid, layout, column, row, template, elements, align, positioning, position, center, justify, flex, flexbox, design, ui, ux, user

Id: Y9rHsdCxU8Q

Length: 17min 14sec (1034 seconds)

Published: Mon Oct 21 2019