Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
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