Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit

Master flexible layouts with smart, responsive grid strategies

CSS Grid is one of the most powerful layout tools in modern web development. Yet even seasoned developers can get tripped up by the subtle but crucial difference between auto-fill and auto-fit when using repeat() with minmax().

This guide explains what each does, how they differ, and provides code examples you can use in your own website development.

Why use repeat() with minmax()

Before comparing auto-fill and auto-fit, let’s look at the foundation.

One of CSS Grid’s most effective responsive patterns is:

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

Here’s what it does:

• minmax(200px, 1fr) means each column must be at least 200px wide but can grow to fill available space.
• repeat() with auto-fill or auto-fit automatically generates as many of these columns as will fit in the container.

This is how you create responsive, adaptive grid layouts without relying on media queries.

What does auto-fill do?

auto-fill literally tries to fill the row with as many columns as will fit, even if there’s leftover space. Importantly, it preserves space for any empty tracks.

This is helpful when you want a consistent grid structure—where extra columns maintain their spacing even if there’s no content to fill them.

Example

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

Behavior:

CSS Grid calculates how many 200px-wide columns can fit in the container. If there’s leftover space (and not enough content), empty columns remain as reserved space.

Use auto-fill if you want your layout to maintain alignment and anticipate future content without reflowing the existing grid.

What does auto-fit do?

auto-fit is similar, but with one critical difference: it collapses empty tracks, letting existing columns stretch to fill the available space.

It’s ideal for variable or dynamic content where you want your grid to adapt fluidly to however many items you actually have.

Example

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

Behavior:

Columns have a minimum width of 200px. Any extra space is given to existing columns by collapsing empty slots. Fewer items? Wider columns.

Use auto-fit when you want your grid to stay full and responsive, regardless of the number of items.

Practical Example for Developers

Imagine you’re building a team directory. You want cards to:

• Be at least 200px wide
• Fill space responsively

Using auto-fill:

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

This keeps the grid rigid. Even if you only have a few team members, the grid reserves space for the rest—maintaining alignment, but with gaps if there aren’t enough items.

Using auto-fit:

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

Now, if there are fewer cards, they expand to fill the space. No leftover empty columns—just a flexible, adaptive layout that feels natural.

When to use which

Use auto-fill when you want to preserve your grid’s structure, even if some columns are empty. Use auto-fit when you want existing items to flex and fill the entire space naturally.

Final Thoughts

At Epogee Design, we know that small layout decisions lead to extraordinary user experiences. Understanding when to use auto-fill vs auto-fit is key to building intuitive, responsive designs that work beautifully across devices.

If you’re ready to elevate your website design, let’s talk. We build bespoke solutions that don’t just look good—they perform beautifully and scale with your business.

Contact us to get started.