Identifying Patterns & Creating a Grid

[00:00:00]
>> Jen Kramer: We got 16 columns to work with here. And somehow, we're gonna have to go to through through these various layouts. So let's start with this one here. We have two columns next to each other and then underneath, we're going to have, basically, the other two columns, right?

[00:00:21]
Let's start by thinking about this particular problem. And of course, we have to write out what we're doing for our mobile layout as well. So here we go for our mobile layout.
>> Jen Kramer: If we look at our HTML here, scroll on down to where the content starts. We have a main, right?

[00:00:48]
>> Jen Kramer: And here's the children, yeah? So I've just used VS code here to hide what was inside of all of these simplifies things, right? So main is here, and we have four children. Does that look like a pattern, yeah. So main is gonna be our parent. All the sections are gonna be our children.

[00:01:10]
Main is considered to be the flex, is gonna be our flex container. And then the sections are gonna be our flex items right? So the selector then is not gonna be this, right? For all of these stuff, what is this selector going to be? Could we use one selector that would grab all of those items?

[00:01:38]
>> Speaker 2: Section.
>> Jen Kramer: How about section? Yeah, section, okay? So that's gonna be our code here for section. We have some tweaks to make, but one thing at a time, okay? And then what's the other important part here going to be? Main, right? So main ones are being our parents, so here, what kind of things do I need to declare here?

[00:02:03]
>> Speaker 3: Flex flow.
>> Jen Kramer: Yeah, display flex. We need to do our flex flow, row wrap, okay. And we need to do our justify content. Space between, okay.
>> Jen Kramer: And columns is what?
>> Speaker 4: 12,16.
>> Jen Kramer: 16, right? Because that's what our designer told us. Our columns are 16. And so how wide is it at mobile dimensions?

[00:02:44]
How wide is each one of our columns?
>> Speaker 3: 16.
>> Jen Kramer: 16 columns, correct. Okay, so let's change our width here to 16. Gosh, we're done. [LAUGH] Okay, that's pretty much it, right? By the way, I'll throw in something else here, for those of you who are bothered by passing invariables without a default value, that is supported here in CSS, so you can add to this.

[00:03:16]
Just simply put a comma and a default value, so if there is no value that's passed in and we'll use that as the default. So it's just comma and then whatever you want. Okay, so I've chosen 0 and 16. You can choose whatever you want. Likewise here for gap, we can say, columns, comma.

[00:03:40]
>> Jen Kramer: 16, and the variable is with comma 0.
>> Jen Kramer: Okay.
>> Jen Kramer: Cool, that's all set. We've done the mobile layout and in fact, if you save that layout.css and you view your webpage.
>> Jen Kramer: Shockingly, it will look exactly the same as it did before, yay. [LAUGH] Okay, aren't you all happy?

[00:04:06]
Of course these are floating, cuz this is a wide screen now so you'll need to shrink it down so that those images aren't floating. Okay, good. So we got it working for that dimension. Oddly, the next dimension I want to work on is going to be the 1200 pixel 1 with the 4 columns next to each other.

[00:04:25]
I just think, conceptually, it'll be easier for you to look at that first and sort of work backwards and we may wind up having to refactor a little bit. So these media queries cascade correctly. But I think, conceptually, it'd be easier to start with this. So what's gonna happen when we get here to 1200 pixels?

[00:04:43]
Let's remind ourselves what this looks like. So we've got these four columns, right? How wide is each one of those columns in columns as your unit? So let's just make up some numbers, right. Which one is the skinny one?
>> Speaker 5: Designers or the developer.
>> Jen Kramer: Yeah, those developers.

[00:05:03]
That's kind of a skinny one. What's our fattest one?
>> Speaker 5: Ranger School.
>> Jen Kramer: The number two here, yeah. One is slightly narrower, say the number two, okay? And number four is maybe slightly wider than the developer's number three, right? So we need to come up with a bunch of numbers that add to 16.

[00:05:26]
And honestly, we could probably ask our designer how many columns wide they made each of these. But my designer didn't tell me. So I'm gonna guess. And we can guess with some reasonable numbers here, right? So first of all let's just establish that we have first, right. We just gonna use the ids of these sections cuz they are there, and they are handy.

[00:05:48]
We have main. We have devs.
>> Jen Kramer: And we have resources, right?
>> Jen Kramer: There are four parts.
>> Jen Kramer: And if we take a look at our order here, we have first main devs and resources. So they are all essentially in the order that we want already. The source order is the order that we want.

[00:06:22]
So we don't need to do any reordering. So let's just come up with a description of what it is we're gonna do here. So how wide is first gonna be? How wide is main gonna be? How wide is debs gonna be? And how wide is resources gonna be, okay.

[00:06:41]
So what I said first is gonna be five main is going to be six Deb's is gonna be two.
>> Jen Kramer: And resources is gonna be three. And if you add that, 5 and 6 and 2 and 3, you get 16, right? Okay, so, let's go ahead and what do we need to declare here?

[00:07:15]
For first, we need to do what?
>> Speaker 3: The width property.
>> Jen Kramer: Yeah, the width variable. And what's that width gonna be?
>> Speaker 5: 5.
>> Jen Kramer: 5, awesome, and then all we have to do is just copy that, yeah.
>> Jen Kramer: So what's it gonna be for me?
>> Speaker 5: 6.
>> Jen Kramer: 6, what's it gonna be for devs?

[00:07:42]
>> Speaker 5: 2.
>> Jen Kramer: 2, what's it gonna be for resources?
>> Speaker 5: 3.
>> Jen Kramer: 3, awesome. Go ahead and save that.
>> Jen Kramer: Take a look at your webpage. Let's refresh it. Still works at mobile. Not sure what we're gonna get here in between. Well, whole lot or nothing. Look at that.

[00:08:15]
>> [SOUND]
>> Jen Kramer: That's easier than Bootstrap, isn't it?
>> Jen Kramer: So much easier than Bootstrap. All that extra markup and all the rest of it, look at what we did. I'm finally seeing some smiles in this classroom. It's great to see. Okay, now, what do you think about the gap in between these rows?

[00:08:38]
Are you happy with that?
>> Jen Kramer: It's a little hefty. Maybe it's a little hefty. But again, we just copied over what we started with, right? So if we wanna tweak it, what can we do?
>> Jen Kramer: What is the thing we need to tweak if we want to tweak it?

[00:09:01]
>> Speaker 4: Gap.
>> Jen Kramer: The gap, right? The gap is the issue. We multiplied it by 1%. Maybe we should drop that value a little bit? What if we did something like 0.3%. Because I've never done this before and I'm randomly guessing 0.3%. Okay, so you can make that constant whatever you want, right?

[00:09:25]
I'm gonna make it 0.3% this time. Now let's go on ahead and just save that and go on back and take a look. That's a little nicer. What do you think?