CSS Styles for Desktop Layout

[00:00:00]
>> The last part of our easy design, we are almost done, now, we just have our desktop layout left to go. So once again, let's take a look at our desktop layout and let's take a look at our tablet layout. And let's talk about the differences between these, it's always a great place to start.

[00:00:23]
So here's our tablet layout as it exists, here's our desktop layout, what is happening?
>> Tour is moving over.
>> So we're pulling Tour out and we're putting it in a column on the right-hand side, yeah? So we're taking the thing in the middle, right? We're taking the thing in the middle, and we're putting it over on the right hand side.

[00:00:53]
Anything else? Pretty much it, yeah? Okay, so anybody really concerned about that, like that can't possibly happen? Okay, so let's see what we can do to make that happen. We're gonna pull the thing in the middle out, and we'll start with our Beginning CodePen here. So in order to get the Tour gates next to those other items, now, rather than focusing on units within the page, like we focused just on Tour, now, we need to focus on the shape of the page overall, okay?

[00:01:35]
So we're gonna lay out the whole page overall. And to do that, we will open up another media query here. And I guess I'll just put it here, @media. And we'll just say for argument's sake, this has a min-width of 1025 pixels. And again, how did you wind up with that?

[00:02:02]
The designer said you experimented, you came up with that number. And so we'll start by resetting our wrapper. And then we'll have a max-width of 1200 pixels. Okay, so when you make your window big enough, you should get a really hunk and big picture, right? And when you hit that breakpoint, you might get a little space around the picture, make sense?

[00:02:38]
Okay, so let's refer to our HTML here, and we can flatten everything here. So we can see our outer structure. So what we have is we have a div with a class of wrapper, and that is going around a div with a class of banner, around main, around aside, and around footer, right?

[00:03:05]
Look like a structure you know and love, okay? So what is the parent or the container?
>> Wrapper.
>> Wrapper.
>> The wrapper, and what are the children?
>> All the other.
>> All the other stuff, those are the children, right? So if we set this up to layout and grid, we can set it up with two columns, right?

[00:03:28]
And then we can actually tell each one of those HTML elements which column to wind up in. That you cannot do with Flexbox, not easily. So let's do that here with grid. All right, so we were gonna set this up, is we're gonna say display: grid. And then grid-template-columns: 2fr 1fr.

[00:04:05]
Okay, and then gap, 0 2rem. Those two numbers specify top and bottom, right? So zero gap on the top and the bottom, and 2rem specifies in-between, so the columns, so it's row, column. And it looks like nothing on the page has changed, so make your page bigger. [SOUND] What's going on here?

[00:04:37]
Your first rule of CSS is don't freak out.
>> [LAUGH]
>> Okay, don't freak out. You did this thing, you have no idea what's going on, what's the first thing that you should do besides not freak out?
>> Put a border on-
>> Border it up.
>> Put a border on it, okay?

[00:04:54]
What the heck just happened, let's put a border on it. So we can use that same selector again, wrapper > *, border 1px solid white. Okay, so that helps, doesn't it? You can see that we have two columns. Do you see what's going on here now with those lines?

[00:05:24]
Can someone describe to me what's going on here?
>> It took every child inside of wrapper and put one in each grid space.
>> It did what grid always does. Gosh, darn it, it put the header in the first spot, it put the div class of banner in the second spot, it put main in the third and aside in the fourth and footer in the fifth, right?

[00:05:46]
Because this is what grid does, it takes everything and then it assigns it to the columns, just like that. All done, except that's not what we want, right? Okay, so what do we need to do to fix this?
>> Specifically assign each child to a spot.
>> We're gonna specifically assign each child to a spot, for sure.

[00:06:09]
Okay, so we need to use the grid-area function again to have the Tour information in the right column. So let's put that in place. So remember we had grid-area a little bit earlier. We can do the same thing here, and we can say main, in our grid-area. Okay, so main is this Tour location here.

[00:06:37]
We want it to show up over here in the second column, and we wanna show up from start to finish. So the first thing that we need is the grid row start number. So what row do we want the Tour to show up in?
>> One.
>> We want it to show up in one, the first row.

[00:06:57]
Then the next number is our grid column start. So what column do we want it to show up in? This is one, even though it looks like there's two, this is just one. [LAUGH] It's just one thing here. So this is number two and this is number three over here.

[00:07:12]
So it's gonna be 1/2/, then we want it to show up all the way down the page. So it's gonna go 1, 2, 3, 4, all the way down here at the bottom, 4, right, /4/. And then the end of this column would be number three. Let's see what happens.

[00:07:43]
Okay, so we said, main, we want you to show up and occupy the entire right column. What did that mean for everything else? There was nowhere for it to go, but the left column, right, correct? Right, [LAUGH] so everything showed up over here in the left column. Awesome, so now what do we need to do with Tour?

[00:08:11]
>> Make everything inside one column.
>> Yeah, so here's the interesting thing about that Tour, right? It is a grid child, right, as a result of wrapper, it's a child of the wrapper. But main also has its own children, right? So main itself, all we actually need to do here is we could say display: block.

[00:08:37]
That turns off grid and it reverts to the column that we had earlier. How cool is that? Just turn the grid off. We don't need to go reset everything, okay? And now, let's compare that with how we're supposed to be looking, okay? What other changes do we need besides turning off the borders?

[00:09:06]
Here's where we are. Here's our comp, what do we need to do?
>> Less spacing around the header.
>> Maybe less spacing, or push Tour down here to be even with the picture, something like that, right? And I think I did that with just a padding-top here on main of 8rem, which was just trial and error.

[00:09:35]
And let's turn off those borders now, and let's see if that wind up working out. Well, it looks a little funky, maybe this is actually 5, 3. Did that work? Here we go, you have to count. If you can't count, you can't get the right answer. So my grid-area, I had the wrong number here for my ending row.

[00:10:01]
So I changed it to a 5 and now everything's lined up the way it's supposed to line up. So look at that, you're done, you've completed the easy design. Was it easy? [LAUGH] It wasn't too terrible, right?