🔁 repeat() — The Smartest Way to Generate Grid Tracks in CSS Grid

🌐 What is repeat()?

repeat() is a CSS Grid function that lets you create multiple grid tracks (rows or columns) using a compact, clean, and scalable syntax. Instead of writing the same value over and over, you can generate tracks automatically.

>>“repeat() keeps your CSS clean — one function replaces many repetitive values.”

🎯 Syntax

repeat() Syntax

repeat(<count>, <track-size>)

count → How many tracks to generatetrack-size → Width or height of each track

📌 Where can repeat() be used?

  • grid-template-columns
  • grid-template-rows
  • repeat(auto-fit, ...)
  • repeat(auto-fill, ...)

🧪 Basic Example

3 Equal Columns

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

This generates 3 equal-width columns → 1fr 1fr 1fr.

📐 Without repeat()

Manual Equivalent

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

repeat() makes your CSS cleaner and easier to maintain.

🔥 Repeat With Fixed Values

Fixed Column Repetition

grid-template-columns: repeat(4, 200px);

Produces four 200px-wide columns.

🧠 Special Feature: auto-fit & auto-fill

repeat() becomes extremely powerful when used withauto-fit and auto-fill.

1️⃣ auto-fit — collapses empty columns

auto-fit + minmax

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

Fills available space and removes unused columns → responsive & fluid.

2️⃣ auto-fill — keeps empty columns

auto-fill + minmax

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

Behaves similarly but preserves implicit empty columns.

Note

🧠 Tip:
Use auto-fit when you want content to stretch.
Use auto-fill when you want consistent grid structure.

📏 Practical Examples

Responsive Card Grid

Card Grid Example

.cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

The grid automatically adapts to screen size, with each card at least 300px wide.

Uniform Row Heights

Repeat for Rows

grid-template-rows: repeat(5, 100px);

Creates 5 rows, each 100px tall.

🧩 Combining repeat() With Other Functions

repeat() + minmax()

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

Each column has safe minimum size but can grow flexibly.

repeat() + auto unit

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

Useful for sidebar + content layouts.

📱 Advanced Pattern: Holy Grail Layout

Holy Grail Using repeat()

.layout {
  display: grid;
  grid-template-columns: 200px repeat(2, 1fr) 200px;
}

repeat(2, 1fr) generates two equal flexible center columns.

⚠️ Common Mistakes

  • Using repeat() without considering minimum widths
  • Confusing auto-fit vs auto-fill
  • Using large fixed px values inside repeat() on small screens
  • Expecting repeat() to auto-create rows or columns without template definitions

Note

💡 repeat() only generates tracks — it does NOT place items.

🔥 Summary

repeat() is one of the most important CSS Grid tools for writing clean, scalable, and responsive grid definitions. From simple equal columns to complex responsive galleries, repeat() makes layouts easier.

>>“repeat() removes repetition from your CSS — elegant, efficient, powerful.”

Learn more →MDN Docs 📘