1
00:00:00,660 --> 00:00:04,300
CSS Grid introduces a repeat
function that saves you time and

2
00:00:04,300 --> 00:00:06,480
helps keep your CSS maintainable.

3
00:00:06,480 --> 00:00:10,290
Repeat offers a shortcut for
repeating patterns of tracks

4
00:00:10,290 --> 00:00:14,025
which keeps you from having to write
the same values over and over again.

5
00:00:14,025 --> 00:00:17,895
This function can be used in the grid
properties, grid template rows, and

6
00:00:17,895 --> 00:00:19,305
grid template columns.

7
00:00:19,305 --> 00:00:23,935
For example, if you have a column track
listing that consists of repeating values,

8
00:00:23,935 --> 00:00:27,625
like, 1fr, 1fr, 1fr,
use the repeat function.

9
00:00:29,585 --> 00:00:31,625
Pass it the repetition value or

10
00:00:31,625 --> 00:00:34,910
the number of tracks you want
it to repeat, in our case, 3.

11
00:00:34,910 --> 00:00:39,030
Followed by a comma and
the value to repeat, 1fr.

12
00:00:39,030 --> 00:00:44,320
So this function repeats 1fr three
times in this track listing,

13
00:00:44,320 --> 00:00:47,830
which displays a flexible,
equal width, three-column layout.

14
00:00:49,990 --> 00:00:54,460
You can also use repeat for
just a part of your track listing.

15
00:00:54,460 --> 00:00:57,296
For instance, in a track list like this,

16
00:00:57,296 --> 00:01:03,960
we are repeating 1FR to set the second,
third and fourth tracks.

17
00:01:03,960 --> 00:01:07,492
So you can replace these three
tracks with the repeat function.

18
00:01:12,943 --> 00:01:13,969
And let's go ahead and

19
00:01:13,969 --> 00:01:17,272
add two more items to fill in these
empty column tracks in the bottom row.

20
00:01:26,533 --> 00:01:31,299
Now you may not recognize the benefits
of the repeat function right away

21
00:01:31,299 --> 00:01:35,520
when working with just two,
three, or four grid tracks.

22
00:01:35,520 --> 00:01:39,260
Repeat notation will come in handy when
you're working with a large number of

23
00:01:39,260 --> 00:01:42,620
columns or
rows that have a reoccurring pattern.

24
00:01:42,620 --> 00:01:44,900
You can write your grid tracks
in a more compact form.