HTML & CSS - Mastery / CSS Grid System

minmax() & repeat()

🧮 minmax() in CSS Grid

The minmax(min, max) function sets a range for track size:

➡️ Minimum size (can't shrink below)

➡️ Maximum size (can grow up to)

✅ Syntax:

minmax(MIN, MAX)

  • MIN: Minimum track size (e.g., 150px, 0, auto)

  • MAX: Maximum track size (e.g., 1fr, 500px, auto)

🧪 Example:

grid-template-columns: minmax(200px, 1fr);

👉 This column will never shrink below 200px

👉 It can grow to take available space using 1fr

🔎 Common Use:

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

🎯 When to Use minmax()?

Use Case

Why use minmax()

Responsive grid items

Prevent shrinking too small

Mix fixed min size + flexible max

Control layout in smaller screens

🔁 repeat() in CSS Grid

📌 What is repeat()?

The repeat(count, value) function avoids repeating code for grid tracks.

✅ Syntax:

repeat(COUNT, VALUE)

  • COUNT: Number of times to repeat

  • VALUE: Size of each column/row (e.g., 1fr, 100px)

🧪 Example 1 – Fixed Repetition:

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

➡️ Creates 3 equal columns of 1fr each.

🧪 Example 2 – With minmax():

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

➡️ 4 columns that won’t go below 100px, but can expand.

🧪 Example 3 – With auto-fit or auto-fill:

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

➡️ Responsive layout: as many columns as fit the space.

🎯 When to Use repeat()?

Use Case

Benefit

Multiple equal columns

Cleaner code

Dynamic layouts with auto-fit

Responsive grid without media queries

🧑‍💻 Full Example:

The items will be At least 50px or At most 1fr (fraction of available space).

🔑 Summary

Function

Description

minmax()

Sets min and max size for grid tracks

repeat()

Reduces repetition when defining columns/rows

Use them together for clean, responsive grid layouts!