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