Specify the sizes of implicitly created grid tracks

[00:00] In our markup, we have a container with 10 grid items inside. A container is display grid with a 20 pixel gutter, and it's taking up the available height. Let's say in this grid layout we want the first and second grid item to have explicit row sizes. For that we can do grid template rows. Let's say 4FR6FR.

[00:27] Now, the first two are larger than the rest, so we've been explicit about the first two items. The rest of these are implicitly sized. We can control the size of implicitly created grid tracks, so we can use grid auto rows. If we wanted all the implicitly created rows to be the same size as the second row, we could specify 6FR.

[00:58] Now, 3 to 10 are the same size as two. We can make them twice as big as the second one if we wanted. The idea is that if we haven't been explicit about grid template rows or grid template columns and yet there are items that fill implicitly created grid tracks, then we can control those sizes with grid auto rows and grid auto columns.

[01:27] We can even specify more than one value here. We could say grid auto rows 1FR12FR. Now, 3, 5, 7 and 9 are 1FR. 4, 6, 8, and 10 are 12FR. Let's throw some columns into the mix. We can say grid template columns.

[01:55] We want the amount to be implicitly created. We want the minimum size to be 300 pixels and the maximum to be auto. Now, we immediately have a responsive layout mixing up implicit and explicit rows and columns.