What does the repeat() function do in Grid?

Q: What does the repeat() function do in 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. `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. .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .item { background-color: #2196f3; color: white; padding: 20px; text-align: center; font-weight: bold; } 1 2 3 4

Difficulty: 5/10

repeat(), grid-template-columns, responsive layout

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

1
repeat(count, track-size) defines a pattern that repeats count times.
2
You can use it in both grid-template-columns and grid-template-rows.
3
The track-size can be a fixed value (like ), a flexible unit (), or even a combination of values (e.g., ).

Example: Using repeat() for Columns

Scenario Questions

0-2 years experience

Follow-up Questions