Creating a Basic Grid 0:00Let's review the new fraction unit now. So I have nine divs here and a bit of styling. Nothing here is CSS grid specifically, just setting a width, some coloring, some font weight, simple stuff like that. So if we come to Chrome and take a look, this is what we have at the moment. Okay, let's begin turning it into a grid. Display grid. And then for our columns, let's start by saying 100 pixels, 100 pixels, and 100 pixels. So three columns where each one is 100 pixels wide. So if we give this a refresh, now we have our grid. We could even add a gap there. Refresh. And here we go. Now remember, if you need to explicitly control the height, well then you would use grid row for that. So you could say grid template rows, and then let's make the top one 50 pixels. Actually, let's do all of them like this. Or we could say repeat three times 50 pixels. And then here, repeat three times 100 pixels. All right, give that a refresh. And this Using the fr Unit 0:48the top one 50 pixels. Actually, let's do all of them like this. Or we could say repeat three times 50 pixels. And then here, repeat three times 100 pixels. All right, give that a refresh. And this is all I recap at this point. Now, what if we wanted this third column here to take up all of the available space? Well, take a look. We could say, let's bring this back, two columns of 100 pixels. And then the third column, I'm going to use this new fraction unit, fr for fraction. So if we come back and give that a refresh, now it takes up all of the available space. And that's the way I want you to think of this. When you see fr, I want you to think it should take up one part, or basically one out of one, 100% of all the remaining space. So the way it works is we take the explicit values and those come first. So this has to take up 100 pixels. This next one has to take up 100 pixels. And now after we allow for that, for whatever remaining space we have, we Splitting Space with fr 1:37the explicit values and those come first. So this has to take up 100 pixels. This next one has to take up 100 pixels. And now after we allow for that, for whatever remaining space we have, we want this to take up all of it. So that means if I were to say 0.5, well that's going to take up half of the remaining space. So you can do some interesting things here. Like imagine you have two and then one. Okay, so what's going on there? Well, first let's give it a refresh. So once again, let's break it down. The explicit values, the pixel-based values, that comes first. So this is always going to take 100 pixels. But then after that, we have all of this remaining space. So for that remaining space, we're saying, all right, we're going to divide that into three parts. Two plus one is three. So now we're saying we want two out of those three parts to be in the second column, and then one out of the three parts in the third column. Or in other words,parts. Two plus one is three. So now we're saying we want two out of those three parts to be in the second column, and then one out of the three parts in the third column. Or in other words, this should take up twice as much of the available space as this. So it just gets divided automatically. So now you can see, yeah, the third column takes up roughly 220 pixels. So that means this is going to take up about 440. Yep, and there you go. So if you think about it, what if we said one fraction for all of them? So we could say repeat three times one FR. So how would this turn out? Think in your head. What would be the outcome? Well, if we take a look, the same, right? At this point, we have the entire width, the entire space is available. And we want to divide that into three. And the only way to do that is to have each one of those take up the exact same space. So you get an even grid there. Mixing Fixed and fr Values 3:10the entire space is available. And we want to divide that into three. And the only way to do that is to have each one of those take up the exact same space. So you get an even grid there. But if we instead said one FR, two, and then three. So if we divide this up, we have about six available spots. Three means it should take up three times as much of the available space as this one. So if we give it a refresh, so we do the first one, it's about 140 or so. And then this, about 400. Yeah, so about three times as much space. Now one last thing. It's important to remember that your pixel-based values, your percentage values, those will always come first. So when you think fraction, think a fraction of the remaining space after that. So if we had 30 pixels and then one fraction twice, well, that means we're first. This is specifically going to be 30 pixels. And then after that, for the remaining space, it will determineSo if we had 30 pixels and then one fraction twice, well, that means we're first. This is specifically going to be 30 pixels. And then after that, for the remaining space, it will determine the proper widths. And in this case, they're the same, so they have to be the exact same width each. And this is true, like I said earlier, for percent values. So this is going to be 30 pixels. Next, we have 10% of 800, which is 80 pixels, right? So if we measure that, we get 80 pixels exactly. And then of that remaining space. So we could even figure this out. 800 minus 80 minus 30. We have 690 pixels of available space. So that's what this third column should be. Let's do it. We're going to get about 690. And in fact, we could even shorten the grid just to make it a little more clear, because that does get factored in. So if we measure this, yeah, notice we get 690. And do remember, the gap will factor into that, so it will decrease the entire Accounting for Gap Width 4:48little more clear, because that does get factored in. So if we measure this, yeah, notice we get 690. And do remember, the gap will factor into that, so it will decrease the entire width if you measure that, as you would expect. But anyways, that's all you need to know here.
