Check out a free preview of the full CSS In-Depth, v2 course:
The "Columns & Rows" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Estelle shows how to mix units of measure when defining grid columns and rows.

Get Unlimited Access Now

Transcript from the "Columns & Rows" Lesson

[00:00:03]
>> Estelle Weyl: So columns and rows, there's two properties, right? What you saw so far was grid-template-columns, we also have grid-template-rows. Which is how tall each row is, it will be as tall as it needs to be, or as tall, basically it'll default to whatever height it would have had.

[00:00:23] Unless you tell it specifically how tall to make it. So according to the spec, you can say none, give it a track-list or an auto-track-list. And a track-list is what we did here, and we said repeat 4, and then 1. But I could actually take number 10 and put it in the fifth row and fifth column.

[00:00:47] And then the grid will grow to actually encompass that placement, we're going to talk about placement in a bit.
>> Estelle Weyl: Okay, so here are different ways to declare template columns. The first one says, I want to have 3 columns, each of them 150 pixels. I could have written that exact same thing by saying, repeat 3 times, 150 pixels.

[00:01:15] The next one, I keep 2 of those 150 pixels, but I decided to make the first one 275 pixels, so I said, 275 repeat twice 150 pixels. And then in the fourth example, that's the only one where I have 4 columns, it says, make the first column 100 pixels.

[00:01:33] Make the next 2 1fr, and then the fourth column, make it 2fr. So let's copy this and go back, and just put it right here.
>> Estelle Weyl: Oops, forgot the property.
>> Estelle Weyl: So there, the first row 1, 5, and 9 are 100 pixels, the next two are 1fr, and the last column is 2fr.

[00:02:04] So you'll notice that number 4, 8, and 12 are twice as wide as 2, 3, 6, 7, and 10, and 11, can you see that?
>> Estelle Weyl: Now, let me just kind of do the same thing, and hit it with rows.
>> Estelle Weyl: And.
>> Estelle Weyl: So the first one is 50 pixels tall, the second one is 1 unit of free space, and the last one is 2 units of free space.

[00:02:44] So that is why 12 is twice as wide as 8, does that make sense?
>> Estelle Weyl: Okay, so grid-template-rows, in this case, the first one, I said, 150, 150, 150, that would have made 3 that are 150 feet tall. The second one says 3 times 150, same thing as the first line.

[00:03:06] The third one is saying 275 pixels and then repeat, let's show how this one works.
>> Estelle Weyl: So there's no reason-
>> Estelle Weyl: To not mix units.
>> Estelle Weyl: Okay, so here column 1 is 275 pixels tall, and column 2 and 3 are both
>> Estelle Weyl: 150 pixels tall, but then we have a column number 4.

[00:03:53]
>> Estelle Weyl: And that is where auto columns comes in. You basically declare what you want to declare and then you can use one thing to say everything else. Or no matter how many rows I have, and we're going to cover that in a second.
>> Estelle Weyl: Okay, so these are grid-template columns, grid-template-rows.

[00:04:11] The other thing you can do is you can name the grid lines. So if you want to name a grid line, you just put these brackets here, and I'm going to show you later on why that's kind of useful. But you just put brackets that says grid line 1, it's called start.

[00:04:30] Grid line 2, which happens right here, it has no name. Grid line 3, which happens right here, has no name. And at the end of our third column, there is a fourth grid line, which has the name of end.
>> Estelle Weyl: Sometimes it's easier to not remember how many grid lines

[00:04:44]
>> Estelle Weyl: you have. Especially if you have something really complicated, and when you say, where do I want to put this? I want to put it from start all the way to end, or I want it to put from start to the third column. And I want to put this one from the fifth column to the end.

[00:04:56] So remember how we made that grid really, that pink thing that kept moving? We could have just said, put it to the end instead of actually saying column 8, if we didn't know we had 8 columns.