2.2 Setting Up the First Grid
In this lesson I’ll show you how to use the grid plan that you set up in Photoshop to dictate the CSS grid for the first section of your web page.
2.2 Setting Up the First Grid
Hello and welcome back. Since this is a CSS grid layout course and not a Photoshop course, I'm not gonna walk you through exporting all of the images that we need for this site. Instead I've already exported everything we need, and I'm simply going to walk you through how to set that up now in CSS. So everything that you see in this Photoshop file has already been exported. One thing I will point out is that this background image for the buffalo here was cut off right here where our bottom most guide is. And we have a matching guide at the exact same location for our second file that serves as the top boundary for this image of the girl in the ski jacket. So those two images should nudge right up against each other and there should be one right after the other. Alternatively, you could export this entire image from the buffalo all the way down to the bottom of the girl in the jacket. You could export all of that as one image instead of as two and that would be fine as well. So there are dozens of ways that you could accomplish the things that we're talking about in this course. Okay, so in this lesson I want to start with Section 1, so again, I want to encourage you to take a look at how the grid is set up in our Photoshop file, how the columns and rows are set up. Obviously some columns are quite a bit wider than other columns because we don't need a bunch of content in them, we just have a large image there. But let's jump over to File Explorer here, and I'm inside our project files folder. And in that folder, you'll find another folder called site01-start. This is our starter folder, which has a couple of files in it already, an index file. It has all of our exported images here, and it also has a CSS folder with style.css in it, which is currently mostly empty, except for a couple of small starter styles for us. So I'm gonna go back to our ProjectFiles folder, and I'm gonna make a copy of this site01-start folder, I'll just hit Copy and then Paste. And I'm gonna call this sight01end, and we'll just follow this naming convention as we move forward. So all of the changes we make in this lesson will be saved in the site01end folder. So I'm gonna right-click on that and I'm using Brackets as my code editor in this course, because it's easy to use and I like it. So that's what we're gonna do. So I'm gonna open up our index.html file, here we can find a very simple HTML 5 starter file with the title in it. You'll notice there is also a link to our stylesheet here and there is also a link to a few Google fonts, we have Libre Baskerville and open sans. So everything else we're gonna be doing in this course is gonna go inside the body of our index.html file. Again, in our CSS file, which is where a lot of our work is gonna be done, we have styles.css. And I've applied some basic styles to the body, to the paragraphs, to some of our headings, and to the button element, and there we go. So, when I'm using the grid layout for something like this, this is one of the rare times where I'll usually jump in to CSS first, before I jump into HTML. Usually I like to build out all my HTML first, and then I'll jump into my CSS and start styling it. But when it comes to a layout like this, it's really important to understand the structure of your grid first. So if you lay out that grid in CSS first, then it's gonna be very easy in HTML to go in and just throw the items where they belong. So I'm gonna jump back over to our index.html file first of all, and inside of our body, I'm gonna create a div with an ID, excuse me, of container. That's gonna contain all of my content, it's also going to restrict our content to a specified width once we add the styles for that. And then we'll have a different section element for each section of our site. So we're gonna have sections one through four, because we have four different grid sections set up in our Photoshop files. So basically, what I'm gonna do is I'm gonna create a section element with an ID of section1, and I'm using shorthand here in brackets in order to create my HTML for me. So if I type in the name of the element and then #section1, and then hit Tab, then it'll create a section element with the id that we gave it. So now I'm going to copy that and I'm gonna paste it three more times. And each one of these sections is going to be a different grid, as we've talked about before. Because if you have a lot of content on the page, it's gonna get really crowded if you try to make that all into one grid object or one grid container. So instead, we're breaking it up into four grid containers, and in this particular lesson, we're just concerned with section1. So inside that first section is where we're gonna start. So as I mentioned, I'm actually gonna start building out our grid in CSS first, now that we've got this basic structure there. So I'm gonna jump into my styles.css file, I'm gonna scroll down to the bottom, skip a couple of lines and I'll infuse comments here to mark out my sections. So we'll just call this section1 and we'll get started there. So before we get to section1, I do want to create a rule for our container div, which again, has an ID of container. And I'll make this a little bit bigger so it's easier to see on the video. And for our container, I'm just to gonna set up a couple of simple items, I'm gonna set our background color to a value of white. You'll notice that the background color for our body has been set to a dark grey. And then the container, which is gonna be where the main content is, it's gonna white. So the left and right edges are gonna be dark gray, if you have a large enough browser. All right, so our background color is gonna be white, I'm gonna set our max-width to a value of 1,000 pixels. That's how wide our altered Photoshop file is. Now originally the Photoshop file that I received was over 1600 pixels wide, and it looked really nice in a really, really large browser. But in most browsers, it was hard to see enough of the design to really catch the eye, so I want to limit the width here to 1,000 pixels. And then I want to center that container in the browser window, so I'm gonna set the margin here to 0 space auto, and that will horizontally center our container. All right, so now we'll jump into the section1 section, and remember we have a section element that has an ID of section1, so that's what we're working inside. And one thing we're gonna get used to here, in fact, let's go ahead and do this for all of our sections. Section1 comma, then I will just copy that and paste it a few times, two, three and four. And then we'll just change the numbers. And for all of these, we're simply going to set the display to grid, so each one of these is gonna have its own grid system in it. And then inside each section, we're gonna set up the grid template columns and grid template rows to match what's in the Photoshop file. Now when we're setting up our rows and columns, we're gonna be using two properties. We're gonna be using a property called grid-template-columns and another one called grid-template-rows. And here, we're defining for our columns how wide each of those columns are gonna be. And for our rows, we're defining how tall each of those rows are gonna be. And so you could use hardcoded pixel values here, if you wanna specify exactly how wide a column needs to be. So if you had three columns, one was 10 pixels, one was 20 pixels wide, one was 30 pixels wide, you would simply say 10 pixels space 20 pixels space 30 pixels and then a semicolon. And this would set up our grid to have three columns, and so it's very flexible. It allows you to enter in as many columns as you want, so that's one way that it's much more flexible than something like the Bootstrap grid setup. So, when we're setting up our grid columns here, they're all gonna be based on the size of the columns in our Photoshop file. And as I mentioned before, these don't have to be perfectly accurate to the pixel. If you want to, you can certainly make it that way, but keep in mind that if you do make it accurate to the pixel, and if you specify pixels, then you're gonna have to use a lot of media queries in order to make this work at different browser sizes. Instead, I'm gonna use the fractional unit, or the fr unit to basically define a fractional width for each of our columns. And for the heights of our columns, some of them, we're gonna hard code how tall we want them to be and some of them, we'll just gonna set it auto. So it will auto adjust depending on the amount of content in it. So let's define our columns first. One easy way to do this if you're using Photoshop is to go to the selection tool. And then as you click, let's say we are using the left column here, if we just click and drag from the first line to the second line, we can see this little pop-up that shows us how wide and tall it is. So the width here is 42 pixels wide. And so initially, I'm gonna enter that value in here, but I'm gonna round it to the nearest ten. We're just gonna set it up as 40 pixels wide and then I'm gonna hit Space, and actually, I'm gonna set it up as an fr. Okay, and then I'll hit Space and then move on to the second column. And we see that it is 127 pixels wide, so we can just set that to 130. So I'll 130, and the next one looks like it's about 30 pixels wide, so we'll have 130 fr and then 30 fr. And then on the next one, we'll click and drag out, that's about 50 pixels wide, so we'll set that one to 50 fr. And then our last one is gonna be quite a bit wider than the rest, we'll see that it's about 750. There we go. Now, if we were to use pixels for these and we used these values, so if we did 40 pixels, 130 pixels, then the width wouldn't match the width of our container in the end. But since we're using these fractional values, it's all gonna be relative. It's eventually gonna fill up the entire width of the container that it's in, but it's gonna use these values and compare those values to each other to see how wide each column needs to be within that given width. And since these are all fractional values, we can just drop the 0 off the end of them. Now you're seeing why I rounded up to the nearest ten, and that will kind of give us the same fractional values. Now, if you find a way to reduce those fractions even more, feel free. I'm not gonna go through all that effort, because this works out just fine for our purposes. So now that we've defined our columns, we wanna move onto our rows. So we're gonna do grid-template-rows, and after we do this, we'll go ahead and move on with the next lesson, where we're gonna build this out. So we have our grid-template-rows, we're gonna jump back to our Photoshop file, and our first row is basically gonna define how far away our logo is from the top of the browser window. That's all this first row does is it kind of gives us a spacer there. And we'll see here that it is 43 pixels, let's go ahead and round that up to 45. So we're gonna come down here, and we're gonna say 45 pixels tall. Now our next row is going to depend on the size of the image inside it. So we can set the height of the second row to auto. There we go. Our third row is going to define the amount of space between the bottom of our logo here and the top of our 2018 text. So if you want that to be a specific value, you can enter that in here. And the height here is 56, let's just set it to 55 pixels. And so these are the kind of decisions that you're making as you're working through your grid and laying things out. So the height of our next one is really gonna just depend on the size of the image inside it, so we can set that to auto as well,. And then the one below that is gonna be determined by the size of that buffalo image, so we can set that to auto as well. So our next two rows are both gonna be set to auto and we'll put a semicolon at the end of that line. So now that we have our columns and rows set up, in the next lesson, we can jump into our HTML. And actually, we still have a little bit more to do with our CSS in order to determine the width and height of each of these elements in terms of those rows and columns, but we'll get to that in the next lesson. Thank you for watching.