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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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