The repeat() Function

Repeat Yourself — But In CSS

Writing this is fine… once:

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

Writing it all semester is not.

repeat() lets you define track patterns cleanly — and scale them without rewriting your template every time.

---

The Syntax

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

That means:

• Make 4 columns
• Each column is 1fr

Same result. Less noise.

---

Change the Count, Keep the Pattern

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

You didn’t rewrite the track list — you changed the count.

That’s the whole point.

---

Repeat Works for Rows Too

grid-template-rows: repeat(3, 10rem);

Any track size works: fr, rem, %, minmax(), etc.

---

🧪 MiniMo — Pattern Forge

Long templates are a smell.
Patterns are power.

---

The Takeaway

Use repeat() when:

• Your grid has repeated structure
• You want to scale column/row counts quickly
• You want templates that stay readable under pressure

---

Extra Bits & Bytes

📘 Grid repeat() function Study Guide (PDF)

📘 Grid repeat() function Infographic (PNG)

---

⏭ Growth is implied: The Implicit Grid

There will always be more items than expected in a container. Where will they go?