Check out a free preview of the full CSS In-Depth, v2 course:
The "Track Sizing & Auto Flow" 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 illustrates how to use automatic flow to dynamically assign default sizing to rows and columns that are added not as part of grid-template-row and columns.

Get Unlimited Access Now

Transcript from the "Track Sizing & Auto Flow" Lesson

[00:00:03]
>> Estelle Weyl: And then we have implicit track sizing. So so far, we've basically said, these are the tracks that I want, this is the column-width that I want for the first column, the second column, the third column, right? And this is the first row, I want this size, the second row, I want this size and the third row.

[00:00:20] But what if you have more rows? Or what if you place something in the tenth row and tenth column, and then it's all the way down here and you haven't declared that. So that is what implicit track sizing is. It's basically the grid-auto-columns and grid-auto-rows, or grid-auto-flow which declares both.

[00:00:40] So here, I have declared A, B, C, and D, right? I have said, but I have only declared the first column, and I have only declared the first row. So,
>> Estelle Weyl: This is gonna be 100px. This is gonna be 100px by 100px. And otherwise, I didn't declare anything.

[00:01:12] So what I did is, I added grid-auto-columns, so anything that gets added,
>> Estelle Weyl: Is gonna be 200px wide. Any columns that are added? So right now B was added, so B is 200. But if I do,
>> Estelle Weyl: E and I do grid-column: 4: grid-row: 5.
>> Estelle Weyl: Case sensitive.

[00:01:50] There's E down there, right? So, we basically have 100px here, 100px here. And so when I placed this, it actually grabbed the height and the width of the grid-auto-rows. So if I got rid of this,
>> Estelle Weyl: And that, everything would be 100px. And I wouldn't even need to declare this, but it would be in a different, it would only be 2 wide.

[00:02:20] Why is it 2 wide? Cuz I only went 2 wide with here, right? So I would have had to do 4 to make that bigger.
>> Estelle Weyl: It basically, this is the HTML for it, it's only as wide as you tell it to be, and it's going to be as tall, it's gonna continue growing in height.

[00:02:44] But if you tell it to be wider, then it'll just place everything in the empty area. But sometimes, you actually want empty areas, right? We can create a checkerboard.
>> Estelle Weyl: Here we have a checkerboard. And what I did is I did A at 1,1. B at 1,3. C at 1,5.

[00:03:09] D at 3,1. E at 3, 3. F at 3, 5. So this is basically where I put them, right? So notice everything is odd. And then with J, I did the evens, which is this one right here. So I did 2, 2, 2, 4, and then 4, 2, 4, 4.

[00:03:30] So I used grid-column, basically the shorthand, when you only have one value, it only is 1 column wide. Because everything has got to be at least one column and at least one row.