Inspecting Grid with Dev Tools

[00:00:00]
>> Okay, so I'm gonna save my changes here so far, and what I'd like to do now is show you some of the tools that are inside of the browser development environment, the dev tools. And so, to do this with CodePen, here's the way that you're gonna have to do this.

[00:00:17]
It's this one, yeah, under the little cupcake guy here, look for the full page view, and so that's gonna show you just the design without the CodePen code in the way. And then at that point, what I usually like to do is, I'm interested in this moon right here, so I'm going to right click on that, and I'm going to choose Inspect.

[00:00:41]
All right, so here inside of your web developer tools, if you find the HTML element that is the grid container, the div with a class of grid container, you'll notice that it has the word grid right there after it. And if you click on that, it's gonna show you some information about the grid that we happen to be working with.

[00:00:59]
So you'll see here that we have some numbers that go across the top, okay? You'll also see that we have some hatched areas here inside. So let's start with this, what is this sort of red hatched area inside of each of the figures? What would that correspond to?

[00:01:17]
>> Gap.
>> That's the gap, right? Okay, so remember we have a column gap that's 2rem and a row gap that's 1rem, and it's showing us that right here. We also have some numbers that go across the top here, and these correspond with thinking about grid in terms of all of its columns, and how we might count the lines that go into those columns.

[00:01:40]
So, we start here with line number one, that's to the left of the grid. Line number two is in the center of the grid line, line number three is all the way over here on the right, makes sense? We count like humans, not like engineers, so we start with one, not zero, okay?

[00:01:58]
And then going down the page we start with one again at the top here, two becomes the row here in between, and way down here on the bottom is number three. You'll also see that there's some negative numbers that are involved in here, don't worry about those negative numbers for the moment, just worry about the regular numbers that are there, okay.

[00:02:19]
>> Sorry, how did you select to have the numbers show up?
>> I'm in Chrome, and this is just I click the grid button right here. So we can do other changes right here inside of your code, if you've got your CSS up here, we could make changes here in real time.

[00:02:35]
So, for example, so far we've worked with columns of same width, what if I make a change here and I make this 2fr, 1fr, right here inside of my browser tools. So, now my left column is twice as wide as my right, however wide that is. Cool, no math involved, makes us happy, okay?

[00:03:01]
We can even make more columns, so what if I said 3fr, 2fr, 1fr? Of course, you can make those changes in CodePen as well, so there we go. And as we add columns, you'll notice that the numbers change up here on the top, right? Here's our one little moon down here on the bottom in the next row, okay?

[00:03:31]
>> So just to clarify the numbers, there will always be one more than the number of columns because it's the lines that divide them?
>> Correct, there always be one more, yep. All right so, if everybody feels pretty good about that, let's close out of our browser tools, and I'm going to go back to view source code here in my CodePen should be the button right up here on the top, and this is gonna go back to what we had before.

[00:04:06]
Any questions so far? Now again, this is the basic basics, this is like, again, 80% of what you're gonna use in grid every day is what I've showed you so far.
>> How many frames can you go? Is it up to one through how many of you want?

[00:04:26]
>> Yep, you can have as many as you want, you will eventually run into some limits with the width of your viewport.
>> Sure.
>> [LAUGH] So you may not wanna have like a million.
>> Yeah.
>> Right, but yeah, there's no limitation on the numbers.
>> Okay.

[00:04:40]
>> Yep, no.
>> I wasn't sure if was like a bootstrap thing where it's like you've got multiples of like 12 or.
>> Which is awesome, yes, Bootstrap works in the 12 column grid system, there are an infinite number of columns here, however you wanna do it. So we don't have to worry about that bootstrap math, like this one is six, this one's three that one's three, we can say 2fr 1fr 1fr, right?

[00:05:03]
Which is what we really mean instead of 633, yeah.