Set Tracks with repeat() Notation1: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.
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