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.