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

Well done!

You have completed CSS Grid Layout!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

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.

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