Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Set Tracks with repeat() Notation1: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
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.
This function can be used in the grid properties, grid template rows, and
grid template columns.
For example, if you have a column track listing that consists of repeating values,
like, 1fr, 1fr, 1fr, use the repeat function.
Pass it the repetition value or
the number of tracks you want it to repeat, in our case, 3.
Followed by a comma and the value to repeat, 1fr.
So this function repeats 1fr three times in this track listing,
which displays a flexible, equal width, three-column layout.
You can also use repeat for just a part of your track listing.
For instance, in a track list like this,
we are repeating 1FR to set the second, third and fourth tracks.
So you can replace these three tracks with the repeat function.
And let's go ahead and
add two more items to fill in these empty column tracks in the bottom row.
Now you may not recognize the benefits of the repeat function right away
when working with just two, three, or four grid tracks.
Repeat notation will come in handy when you're working with a large number of
columns or rows that have a reoccurring pattern.
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