Rows & Columns Practice

[00:00:00]
>> So we've got the right shape now we definitely don't have it lining up here exactly right with the other boxes that's okay. We'll get there in a moment, we just have to get all the rest of the boxes in place. So now, that you get a sense of what's going on here and how this goes, don't worry again about exactly lining these boxes up.

[00:00:23]
With the painting we will get there momentarily. But right now what I'd like for you to do is to take let's say five minutes. And I'd like you to go grid-row and grid-column for the rest of D, E, F and G, all four of those. See if you can spell out the grid-row and the grid-column values and get it's not going to line up perfectly, but we'll get there.

[00:01:01]
So specifically, I'm gonna tell you whether I want the row or the column and for what letter. That we wouldn't have any confusion mixing up columns and rows on such. So let's start with letter D. What was your answer for grid-row?
>> 3/5.
>> 3/5, absolutely right. So remember that we have little f and little g over here on the end.

[00:01:26]
And so we're going to have to span across some rows. How about grid column for letter d?
>> 1/2.
>> 1/2, exactly right. That's gonna line up right underneath a and b. So there we go, perfect. All right how about letter E the row for letter E?
>> 3/5.

[00:01:44]
>> 3/5 absolutely right again because it's going to look exactly the same as letter d. And check that out f and g have already all lined up exactly as we want. But we'll fill out the rest of our numbers anyway. So the grid column for letter e is going to be something like 2/3.

[00:02:04]
And then when we get to f and g the four letter f, we're gonna have 3/4 for a row our column is gonna be 3/4. And for letter g, our row is gonna be 4/5 and our column is gonna be 3/4. So you won't see the actual layout change.

[00:02:28]
This is another aspect of grid. So grid tries to guess what it is that you want to do with this particular page. And so we have been very deliberate about spelling out all of the values for our rows and columns. But we don't necessarily need to do that.

[00:02:44]
And as you'll see going forward, we'll start to drop out some of these properties, these extra properties that aren't strictly needed here. But this is good practice to think about those lines and do all of the counting. And come up with the answers that you're looking for here for these complex layouts.