HTML & CSS - Mastery / CSS Grid System

auto-fit vs. auto-fill

📌 What Are auto-fill and auto-fit?

Both auto-fill and auto-fit are used with repeat() in grid-template-columns to create responsive, fluid grid layouts.

They allow grid items to auto-fit the available space based on a defined minimum and maximum size.

🔧 Syntax

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

or

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

👀 Visual Example

🔹 auto-fill - Keep space for empty columns

  • It fills the row with as many columns as possible, even if some are empty.

  • Empty tracks will still take up space.

➡️ Creates as many 200px columns as will fit, including space for empty ones.

🔹 auto-fit - Collapse empty columns

  • Works like auto-fill but collapses the empty columns.

  • Great for layouts that should not show gaps when items are missing.

✅ Summary

Term

Meaning

auto-fill

Fills grid row with possible columns (reserves space for empty ones)

auto-fit

Fits only filled columns, collapsing the empty ones

minmax()

Sets min/max size for columns