Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Specify the sizes of implicitly created grid tracks

    Rory SmithRory Smith

    What happens if our grid items are in implicitly created tracks? Let’s learn how to handle the situation in which we may not have accounted for grid items to show.

    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss