What does the repeat() function do in Grid?

Understanding the repeat() Function in CSS Grid

The repeat() function in CSS Grid simplifies the definition of repeating track patterns for rows or columns. Instead of writing the same size multiple times, you can use repeat() to generate a specified number of tracks with the same (or varying) sizes.

How It Works

repeat(count, track-size) defines a pattern that repeats count times.
You can use it in both grid-template-columns and grid-template-rows.
The track-size can be a fixed value (like 100px), a flexible unit (1fr), or even a combination of values (e.g., repeat(2, 100px 1fr)).
It helps make your grid definitions shorter, cleaner, and easier to maintain.

Example: Using repeat() for Columns

Question Loading...

Transformation and Transition

Frameworks

Everything else

What does the repeat() function do in Grid?

Understanding the repeat() Function in CSS Grid

How It Works

repeat(count, track-size) defines a pattern that repeats count times.
You can use it in both grid-template-columns and grid-template-rows.
The track-size can be a fixed value (like 100px), a flexible unit (1fr), or even a combination of values (e.g., repeat(2, 100px 1fr)).
It helps make your grid definitions shorter, cleaner, and easier to maintain.

Example: Using repeat() for Columns