The difference between auto-fit and auto-fill in CSS Grid is that auto-fill creates as many tracks as possible without resizing them, leaving extra space, while auto-fit resizes the tracks to fill the available space. 1. auto-fill maintains consistent track sizes and leaves whitespace if needed. 2. auto-fit adjusts track sizes to eliminate empty space, stretching items to fill the row. Both work best with minmax() for responsive layouts, where auto-fill suits consistent spacing and auto-fit works well for compact, full-width designs like galleries or cards.

When using CSS Grid, the repeat() function is super handy for creating repeating columns or rows. The real magic happens when you pair it with either auto-fit or auto-fill. These keywords help your layout adapt responsively based on available space.

Here’s how they work and when to use each.

What’s the difference between auto-fit and auto-fill?

At first glance, both seem similar because they’re used in the same context: inside grid-template-columns with repeat(). But their behavior is subtly different:

• auto-fill creates as many tracks (columns) as possible without changing the size of the container.
• auto-fit does the same as auto-fill, but then it resizes the tracks to fill the available space.

So if you're aiming for a responsive grid that adjusts based on screen size, one might be more suitable than the other depending on your layout goals.

How to use auto-fill in repeat()

Using auto-fill means the browser will create as many columns as can fit into the container, based on the size you define. If there's extra space left over, the items won't stretch to fill it — the gaps stay as they are.

Example:

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

This setup tells the browser:

• Each column should be at least 200px wide.
• If the screen gets wider, more columns will appear.
• If the screen shrinks, columns will wrap, keeping a minimum width of 200px.

The key thing: extra space isn’t redistributed — so some whitespace might remain.

Use this when you want consistent spacing and don’t mind empty space on larger screens.

When to choose auto-fit instead

auto-fit behaves like auto-fill, but after placing all the items, it stretches them to fill the entire row.

Back to the example:

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

What changes here?

• Columns still start at 200px.
• But once placed, the browser will expand them to take up all available space.

This gives you a tighter, more compact layout — especially useful for galleries, cards, or anything where full-width usage looks better.

In short: auto-fit resizes tracks to eliminate empty space.

Practical tips for working with minmax() and auto-*

If you're going to use either keyword, combining them with minmax() is a great idea. It gives you control over how flexible those columns are.

A few things to keep in mind:

• You can mix auto-fit with fixed sizes, but minmax() is more flexible.
• Using 1fr allows tracks to grow equally — great for balance.
• Try not to set a hard max value unless you have a specific design constraint.

Also, test how your layout behaves with different numbers of items — sometimes auto-fit can cause unexpected stretching if there aren't enough elements.

And that’s basically it. These two keywords let you build smart, responsive layouts without media queries. Once you get the hang of how they interact with minmax() and item count, you’ll probably reach for them often.

The above is the detailed content of How does the auto-fit vs auto-fill keyword work in repeat()?. For more information, please follow other related articles on the PHP Chinese website!