CSS Grid Review Solution

[00:00:00]
>> Jen Kramer: Is everybody familiar with this concept? Because I am seeing some puzzled looks here. Do I need to do my little demo about what a difference is between an and a rem?
>> Jen Kramer: Yeah? Mark says yeah, okay, so let's go in ahead and do that.
>> Jen Kramer: We'll just go to head and go to codepend.io/jen4web.

[00:00:24]
>> Jen Kramer: We'll make ourselves a little new pen here.
>> Jen Kramer: And we'll save this real quick.
>> Jen Kramer: We'll call this versus rem.
>> Jen Kramer: And we'll go ahead and drop this into that collection. Okay, so we were here if I have some html if I have an h1. This is an h1 so exciting, And let's say here I have a paragraph.

[00:01:02]
I am a paragraph.
>> Jen Kramer: Okay over here in my CSS, let's give it a background color of blue, and a color of white. And then for my paragraph, let's give it a background color of green, and a color of white. Okay, so here I've got an h1, and I've got a paragraph, there they are, yeah.

[00:01:39]
Now what I'm gonna do, is I'm gonna say margin 1em, actually let me make it padding so you can see it better, padding 1em, all right? Now I'm gonna do the same thing here on the paragraph, how many of you say that the h1 text and the paragraph text is gonna line up, when I type in padding 1em?

[00:02:02]
How many of you say the text of the t and this and the, I and I'm a paragraph, they're going to line up? How many say yeah, totally they're absolutely going to line up? I'm putting 1em on both of those, yeah, some of you do. How many you say, no way, they're totally not going to line up?

[00:02:18]
Some of you say no, totally, they're not gonna line up, okay. Here we go, 1em,
>> Jen Kramer: They totally don't line up, why is that? I said padding 1em in both places, what's wrong?
>> Speaker 2: Relative to the line height or relative to something.
>> Jen Kramer: What is an m? First of all let's start there, what is an m?

[00:02:42]
>> Speaker 3: It's the width of the m character.
>> Jen Kramer: The width of the m character, okay, so if I say, this is an h1, let's throw an in there. I am a paragraph m. Anyone notice anything about the size of those letter m's? They're kid of different aren't they?

[00:03:03]
Okay, so it's a fundamental way of how these things work. Sometimes this is exactly what you want. You want it to be relative to the text that you're working with, sometimes you don't want it to be relative. In this kind of situation if you wanted your text to line up here, absolutely, you want it to be relative.

[00:03:18]
And so here we would go ahead and add an r for rem. And now, look at that, isn't that lovely? So instead of padding 1em, now it's padding 1rem, and now everything lines up beautifully. So what you see me do here in class, is you'll see me tend to work with rems a lot.

[00:03:41]
And the reason why, why rems and not pixels, that's the next question, right? Pixels are a fixed unit of measure, we tend not to use them in responsive design at all, okay? And that's mostly true with a few exceptions, you'll see me use pixels on borders. You'll actually see me use pixels in media queries, because my philosophy is pixels are discrete units.

[00:04:04]
You can't have a half pixel yeah? And so they're pretty clear where they split in the media queries. But you'll see people that use rems or ems in media queries as well. So now we'll go on here to the grid answers for those of you that managed to get to grid.

[00:04:19]
Just to show you yes in fact you can do this once again. So the code is even simpler if you do this with grid. So here, I've just gone ahead and set up with my rapper once again parents and children in grid containers grid items. So on the grid container, we're gonna go ahead and say display grid, we'll set up our three columns.

[00:04:41]
Are you guys familiar with this fractional unit here, where it says repeat(1, 3fr);? Are you familiar with what that is. fr not France that is in fact fraction, okay? And fraction is a unique grid unit. In other words, you can't use it elsewhere in your CSS, it's exclusively for use here on grid.

[00:05:00]
And what's fabulous about fr is it just says in this case, this notation, take this page and divide it into three pieces, make them the same size. Hey, we didn't even have to do math on that one. Wouldn't it be great if we had this unit in flex box?

[00:05:15]
It would make our lives so much easier. Instead of always having to do the math to figure out how wide you want something to be. So that's what that's doing, I did this one as 1em for some reason for my grid gap. But that's going to produce exactly the same measure here.

[00:05:30]
I could totally have said 1rem and that would have been fine. Okay, and so this is the span syntax. And so with the span syntax we're basically saying take your letter A and letter H which, of course, is further down the page here. We just simply want to say take it and go across two columns.

[00:05:50]
So all I have to do is just say span 2, I don't have to tell it where to start. Sometimes you'll see this, 1 span 2. In other words, start at line 1 span across 2 columns, but that's very specific see here. See here how the page has changed?

[00:06:09]
>> Jen Kramer: Okay, so when we just say span 2 it becomes relative. And it’s going to go ahead and span across whatever columns that you have here, all right? And then of course C is going to spam across 3 columns. So very, very simple, so very minimal CSS here?

[00:06:27]
Fine, here’s another way that you can do this. Once again, the same kind of wrapper set-up. Okay, once again, if you had changed this and you guys and spelled out like 33% a piece or something, that would be absolutely fine, not a problem. So the places where it's gonna changes down here in our individual grid columns.

[00:06:48]
So here, this is the number syntax, and so with the number syntax sizes, we're going to have numbers along the way for our lines. We just call them by those numbers, are you guys familiar with the syntax? Okay, I see some people shaking their heads. So let's just go ahead and draw in some boxes, okay?

[00:07:12]
So what grid is going to say is and this is our page, here's our page.
>> Jen Kramer: As you can tell, I never made a living as an illustrator. This over here is line number 1, this is line number 2, this is line number 3, and this is line number 4, makes sense?

[00:07:38]
Okay, so when we talk about if we have a box that goes across this way, spanning 2 columns, what is our notation going to be?
>> Speaker 2: 1 to 3?
>> Jen Kramer: Yeah, 1/3, just like that. And, when it goes across 4 columns, like this, what is it gonna be?

[00:08:01]
1/4, and if it goes across just these two here, what is it going to be?
>> Speaker 2: 2, 4.
>> Jen Kramer: 2?4, exactly, you guys are brilliant, all right? So that's where that notation comes from.
>> Jen Kramer: So that's where those numbers come from, and I did them on the column.

[00:08:19]
Grid row is another way of writing these, so you could do it vertically, right, your grid row. Span some number of rows or spanning a column. So now here for the last answer, this is yet another syntax which is the grid template area. And what we're going to do is we're going to define our layout using the grid template area syntax here, again on our parent.

[00:08:43]
So we have display grid, we're gonna tell it how many columns. Once again same notation and then we're going to spell out areas. This is how we want our page to be spelled out. And I've called my areas the same thing as the letters, just to make it easy, right?

[00:08:57]
So I want to A go across 2 with 1, C to across 3. D, E, F are all on their own. G and the two H's, make sense? Okay, and then down here all we have to do is just spell out who's gonna live in which grid area.