Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

CSS Grid Layout

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Set Tracks with repeat() Notation

1:45 with Guil Hernandez

The CSS Grid repeat() function saves you time and helps keep your CSS maintainable. repeat() offers a shortcut for repeating patterns of tracks, which keeps you from having to write the same values over and over again.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    CSS Grid introduces a repeat function that saves you time and 0:00
    helps keep your CSS maintainable. 0:04
    Repeat offers a shortcut for repeating patterns of tracks 0:06
    which keeps you from having to write the same values over and over again. 0:10
    This function can be used in the grid properties, grid template rows, and 0:14
    grid template columns. 0:17
    For example, if you have a column track listing that consists of repeating values, 0:19
    like, 1fr, 1fr, 1fr, use the repeat function. 0:23
    Pass it the repetition value or 0:29
    the number of tracks you want it to repeat, in our case, 3. 0:31
    Followed by a comma and the value to repeat, 1fr. 0:34
    So this function repeats 1fr three times in this track listing, 0:39
    which displays a flexible, equal width, three-column layout. 0:44
    You can also use repeat for just a part of your track listing. 0:49
    For instance, in a track list like this, 0:54
    we are repeating 1FR to set the second, third and fourth tracks. 0:57
    So you can replace these three tracks with the repeat function. 1:03
    And let's go ahead and 1:12
    add two more items to fill in these empty column tracks in the bottom row. 1:13
    Now you may not recognize the benefits of the repeat function right away 1:26
    when working with just two, three, or four grid tracks. 1:31
    Repeat notation will come in handy when you're working with a large number of 1:35
    columns or rows that have a reoccurring pattern. 1:39
    You can write your grid tracks in a more compact form. 1:42

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up