repeat(): clean shorthand for repeated tracks

Stop writing 1fr ten times

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;   /* 😬 */
grid-template-columns: repeat(10, 1fr);                          /* same, sane */

Patterns

grid-template-columns: repeat(3, 1fr);              /* 3 equal columns */
grid-template-columns: repeat(4, 200px);            /* 4 fixed 200px columns */
grid-template-columns: repeat(2, 1fr 2fr);          /* alternating: 1fr 2fr 1fr 2fr */
grid-template-columns: 200px repeat(3, 1fr) 200px;  /* sidebar + 3 equal + sidebar */

The second arg can be a list of track sizes — repeat(2, 1fr 2fr) expands to 1fr 2fr 1fr 2fr (the pair repeated twice).

Implicit row repeat

grid-auto-rows: 100px defines an implicit row height for every row beyond the explicit ones:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 80px;
}

Every row in this grid is 80px tall regardless of how many rows the children create.

Up next: auto-fit + minmax

repeat() has a magic feature — auto-fit — that makes responsive grids without media queries. We'll see it in lesson 8.