What does repeat() do in Grid?

CSSJunior~1 min read

repeat() shortens the notation for repeating columns or rows in Grid.

Format:

css

grid-template-columns: repeat(3, 1fr);

Equivalent to:

css

grid-template-columns: 1fr 1fr 1fr;

That is, repeat(N, X) means: repeat the value X N times.

Examples:

css

repeat(4, 100px)         /* 4 columns of 100px each */
repeat(2, 200px 1fr)     /* repeat the sequence 200px + 1fr twice */
repeat(auto-fill, 1fr)   /* automatically fill the row with 1fr columns */

Purpose: makes the code shorter and more convenient when creating grids of identical columns/rows.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.