Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Grid Layout!
You have completed CSS Grid Layout!
Preview
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.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up