Step 1: Apply the grid layout - CSS Tutorial

- [Instructor] Let's first, to get started here on this webpage layout, we are going to apply CSS Grid to the page as it is without adding calc or custom properties just yet. Let's just first get the layout working with CSS Grid. So our first step is to get it working in a mobile layout and fortunately, that's complete. So if you take a look at this, this is the webpage in a mobile layout. Everything's stacked on top of each other, so we're done with that. But of course, nothing else is written yet, so as I expand my webpage, it continues to stay in mobile layout and starts to look kind of silly. So it is time to go on ahead and start working on the tablet layout. Let's go on ahead and think about that. Remember that my tablet displays are going to cascade to the desktop, so let's go on ahead and start with that and if we just take a quick peek again at the tablet display to remind us what this looks like, we're going to have one big box on the top and these two underneath. Remember that eventually, these two are going to stack over here on the side next to the purple flowers and then we've got these other three that are here underneath. So what we're going to think about is a three-column layout. A three-column layout is going to work great here on the desktop, there's our three columns. Here's a single column. We have two here for the flowers, and then when we go to our tablet layout, we're going to reduce this two a two-column layout where we have a single cell spanning two columns and then everything else sort of folding in underneath. So that's sort of the strategy of what it is that we're doing here. Let's just go ahead and start by coding this, then, with that in mind and then we'll just want to connect where our code is in our HTML so that we have the right handles in order to write the CSS. And so if we take a quick peek at our HTML here, scroll on down here line 24, we have this div with a class of content and so content is going to wind up being our grid container. It's the parent. And if you take a look at what's inside of that, we simply have all of these, a main, and then all of these asides. These are the immediate children of that container with the class of content. So the main and the asides would be the grid items and the div of the class of content is going to be the grid container or the parent. So each row is going to be two columns wide except for the very first one, so this layout will wind up being really easy to write. We'll just go on ahead and scroll on down here to our media queries. We're going to start with our 600 pixel media query and so what we're going to do is the following. We're going to start with our class of content and shockingly, we'll want to display this as grid. Exactly as you would expect, and then at that point, we can think about how exactly we want to run this layout. Chances are, it's something like we want to do our grid hyphen template hyphen columns, and in this case, we're going to just say repeat. We want two columns and each will be one fraction large. Remember that F R syntax is unique to the grid system and it just simply means take the page, in this case, take the page and divide it into two parts. Each part is one fraction large, so the browser just does that math for you. It's a beautiful thing. Then I'm going to want some space in between those, so let's put in a grid hyphen gap. And I'm going to make that three rem because I want it kind of a sizable gap in between those. We might also think about a max width. One of the things that I have going on here, if you take a look at my code very carefully and those designs, my header and my nav bar go the full width of the browser window, but my content is restricted in its width and that's by design. You don't want your content stretching all the way across the page. The lines get so long, it's difficult to read, but by using this technique with a maximum width here, of let's say, 550 pixels, what'll happen is that this content will stay nice and narrow, easy to read, and then the header and the nav bar and the footer will stretch the full width of the browser window, whatever it happens to be, and make the design sort of feel like it's a little bit more full. Okay, once that's in place, then we can go ahead and add a margin of three rem and auto and that'll give us, again, some space at the end of our content before our headers, the navigation, and the footer, so that's really great. And then the other thing that we'll need to add here then is for main, we're going to have to spell out how wide is this particular layout? So main, remember, is going to be those purple flowers and it's going to be two columns wide. So if I use my grid hyphen column syntax, I can just simply count the number. So if we start with over here, if we think about it this way, over here to the left of all these boxes, this is number one. The middle line here is number two, and the end line over here is number three, so with this syntax, what we have to say here with grid column is simply say one slash three, so we're telling it to span across everything that is there. Because of our grid template columns of two comma one fraction, what'll happen with all of the other children of the div with the class of content, they'll just fill in one box, one after the other all the way down the list. There's actually no additional code we need to write to lay that page out. And then finally, for my aside, I'm going to override some styling that happened earlier. We'll say that margin on the bottom is zero. Otherwise, it's going to get a little bit big and a little bit horsey looking. So let's go on ahead and refresh our page. And of course, we don't have any desktop styles in yet, so it does show up here at this very large dimension. There's our header and our nav bar stretching all the way across the dimension. Our footer goes all the way across on the bottom, but here in the middle, there's main stretching across the full two columns and then here's all of the other pieces that are going to wrap in here underneath, and each one of those children, each one of those grid items takes up exactly one column all the way through. Now we can go ahead and write the styles here for our desktop display. So here in this media query with the minimum width of 1000 pixels, once again, we're going to start with content. Same idea, again, although we're going to change how many columns we have, so here, our grid hyphen template hyphen columns is going to be repeat three comma one fraction. So now, we're up to a three-column layout instead and once again, we may want a max width. Let's say 1000 pixels, and again, that's really just art direction. You can decide what you want to do. Now in terms of our numbers and in terms of our layout, let's go on ahead and look at that again. If we look at our desktop dimension here, now we have our lines at one over here to the left of corporate functions. One, two, three, and four. So let's figure out what we've got going on here. For main, then, we are starting at the column numbers. We're starting at column number two and we're going over three to number four, but we're also spanning some rows, so we're also going to use the grid row property. What rows are we spanning over? Well, those start up here on the top with number one, number two, and number three. So that should give us exactly what we need to put in here for main. So our grid hyphen column will wind up being two slash four and our grid hyphen row will wind up being one slash three, and that's where those numbers came from. Now for the news and the blogs, those are the other things we need to think about. These two asides here because their layout is a little bit different also. If we look again at that desktop dimension, they're over here, which is a little bit unusual because of course, in our source code, main comes first so we need to specify where the newsletter and the recent blogs boxes are, as well. So we can go ahead and do that. So for news, we'll have a grid hyphen column of one slash two, and then for blogs, we'll have a grid hyphen column of one slash two, as well. And what will happen is that again, grid is going to assume that you want news before blogs because that's the order of the source order, so we don't need to spell out the grid row for that particular situation. Go ahead and save your CSS. Let's take a quick peek at the way the website is looking. And so now, you should see newsletter and recent blogs here to the left of the big main area. Your three boxes down here on the bottom. As we start to narrow up our screen, everything should stack in this lovely manner, exactly as our screenshot showed, and then if we scrunch it down one more time, we'll go to our mobile version and everything stacks on top of each other. So this is looking absolutely fabulous, and we're pretty much done with how the webpage looks because this is exactly the way we wanted it to look, but now we're going to recode it to take advantage of calc and custom properties.