🔄 auto-fit & auto-fill — Dynamic Responsive Columns in CSS Grid

🌐 What Are auto-fit and auto-fill?

auto-fit and auto-fill are powerful CSS Grid keywords used inside the repeat() function to create responsive, automatically adjusting columns or rows. They help you build layouts where the number of grid tracks adapts based on available space — no media queries needed!

>>“auto-fit and auto-fill make your grid self-adjusting — more space = more columns.”

🎯 Syntax

Basic Syntax

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

Both are usually used with minmax() to make flexible, responsive tracks.

🧠 The Difference Between auto-fit & auto-fill

KeywordBehavior
auto-fillKeeps creating extra empty tracks if space is available.
auto-fitCollapses empty tracks → letting existing items stretch to fill space.

Note

💡 A simple rule:
• auto-fill → fills the row with as many tracks as possible (even empty ones)
• auto-fit → fits items neatly by removing empty tracks

📌 How auto-fill Works

Automatically creates as many columns as can fit, even if some are empty.

auto-fill Example

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

If there is space for extra 200px columns, the grid will create empty ones, maintaining a consistent grid structure.

📌 How auto-fit Works

Also creates as many columns as can fit — BUT empty columns collapse, letting items stretch.

auto-fit Example

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

Items expand to fill leftover space, making the layout look cleaner and more adaptive.

📐 Visual Explanation

Imagine a container where only 3 items exist but space fits 5 columns:

  • auto-fill: creates 5 columns → last 2 are empty
  • auto-fit: collapses empty tracks → items spread out

🔥 Real-World Example — Responsive Cards

Responsive Grid Using auto-fit

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

Cards automatically wrap and fill the available space — perfect for galleries, products, etc.

🧱 Example With auto-fill (Good for Consistent Structure)

Gallery Using auto-fill

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

Even when fewer items exist, grid keeps the original structure intact.

📱 Responsive Behavior

Mobile to Desktop Example

.grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

Columns grow as the screen grows and collapse gracefully on smaller screens.

⚡ Which One Should You Use?

  • ✔ auto-fit when you want items to stretch and fill the remaining space (clean layout)
  • ✔ auto-fill when you want to preserve empty columns (grid-like structure)

Note

🧠 Most modern responsive layouts prefer auto-fit because it looks more natural.

⚠️ Common Mistakes

  • Using auto-fit/auto-fill without minmax() (leads to fixed tracks)
  • Expecting auto-fill to collapse empty columns (it won’t)
  • Setting minimum size too large → items may overflow
  • Forgetting gap also affects how many columns can fit

🔥 Summary

auto-fit and auto-fill unlock the real power of responsive CSS Grid. They automatically create or collapse grid tracks based on space, allowing you to build layouts that adapt beautifully on every screen size.

>>“auto-fit flexes items; auto-fill preserves structure — both make grids magically responsive.”

Learn more →MDN Docs 📘