CSS Grid Auto-Fit vs Auto-Fill: What’s the Difference and When to Use Each

CSS Grid Auto-Fit vs Auto-Fill: What Actually Changes in Your Layout?

If you have ever used repeat() in CSS Grid, you have probably stumbled on two confusingly similar keywords: auto-fit and auto-fill. They sound alike, they look alike in most situations, and yet they produce very different results when your container has extra space.

In this post, we will break down exactly how each keyword works, show you side-by-side behavior comparisons, and give you ready-to-use code snippets for common patterns like card grids and image galleries.

The Core Difference in One Sentence

auto-fill creates as many column tracks as possible to fill the container, even if some tracks end up empty. auto-fit does the same thing but then collapses those empty tracks to zero, letting the existing items stretch to fill the remaining space.

That is literally the only difference. But it has a big visual impact.

Quick Comparison Table

Feature	auto-fill	auto-fit
Creates tracks to fill space	Yes	Yes
Empty tracks remain in the grid	Yes (tracks stay at their defined size)	No (empty tracks collapse to 0)
Items stretch when extra space exists	No, space is reserved by empty tracks	Yes, items expand to fill the row
Visible difference with few items	Items stay at minimum size, gaps appear	Items grow to consume available width
Visible difference when row is full	None	None

The key takeaway: the difference only shows up when the row is wide enough to hold more columns than you have items. When the grid row is completely filled with items, both keywords produce identical results.

How auto-fill Works

When you write:

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

The browser calculates how many 200px-wide columns can fit inside the container. It then creates that many column tracks, whether or not you have enough grid items to occupy them all.

What happens visually:

• If you have 3 items but the container can fit 5 columns, the browser creates 5 column tracks.
• The 2 extra tracks are empty but still take up space.
• Your 3 items sit at their minimum size (200px in this case) and the remaining space is consumed by invisible empty columns.

How auto-fit Works

Now change one word:

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

The browser still calculates how many columns could fit. It still creates those tracks initially. But then it collapses every empty track down to zero width. The freed-up space is redistributed among the tracks that contain items.

What happens visually:

• If you have 3 items but the container can fit 5 columns, those 2 empty tracks collapse.
• Your 3 items expand beyond 200px, sharing the full container width equally.
• The items grow thanks to the 1fr maximum in the minmax() function.

Visual Behavior Breakdown

To make this concrete, imagine a container that is 1200px wide with a minmax(200px, 1fr) column definition and no gap for simplicity.

Scenario: 3 items in a 1200px container

Keyword	Tracks Created	Empty Tracks	Item Width
auto-fill	6 (each 200px)	3 (remain at 200px)	200px each
auto-fit	6 initially, then 3 collapse	0 (collapsed to 0px)	400px each

With auto-fill, the three items cluster on the left at 200px each, and 600px of space sits empty on the right (occupied by invisible tracks). With auto-fit, each item stretches to 400px, filling the entire container.

Scenario: 6 items in the same 1200px container

Both auto-fill and auto-fit produce exactly the same layout: six 200px columns filling the row. No empty tracks exist, so there is nothing to collapse.

When to Use auto-fill

Use auto-fill when you want the grid to maintain a consistent column size regardless of how many items exist. This is useful when:

• You are building a layout where items should always be a predictable width
• You plan to dynamically add items and want the grid structure to remain stable
• You prefer items aligned to the left (or start) rather than stretched across the full width
• You are working with content management systems where the number of items changes frequently

Practical Example: Product Listing Grid

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
  padding: 24px;
}

.product-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
}

If you have only 2 product cards in a wide viewport, they stay at a reasonable size rather than stretching uncomfortably wide. New products added later will slot into the pre-existing grid structure seamlessly.

When to Use auto-fit

Use auto-fit when you want items to expand and use all available space. This works best when:

• You have a small or variable number of items and want them to look balanced
• You are building hero sections, feature grids, or gallery layouts where stretching looks good
• You want the layout to feel “full” regardless of how many items you have
• You are creating responsive card layouts that should always span the full width

Practical Example: Image Gallery

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

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 4px;
}

Whether you have 2 images or 20, the gallery always fills the container edge to edge. On smaller screens, the columns naturally wrap as the container width shrinks below the 300px minimum.

Combining With minmax() Is Essential

Both auto-fill and auto-fit are almost always used with the minmax() function. Here is why:

1. The minimum value (e.g., 200px) sets the smallest a column can be. This is what the browser uses to calculate how many columns fit.
2. The maximum value (typically 1fr) determines how much columns can grow. Without 1fr as the max, auto-fit cannot stretch items to fill space.

If you use a fixed max like minmax(200px, 250px), auto-fit and auto-fill will behave more similarly because items cannot grow beyond 250px regardless of collapsed tracks.

Real-World Code: Responsive Card Grid

Here is a complete, production-ready card grid component using auto-fit:

<div class="card-grid">
  <div class="card">
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </div>
  <div class="card">
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </div>
  <div class="card">
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </div>
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: #ffffff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card h3 {
  margin-top: 0;
}

.card p {
  color: #555;
  line-height: 1.6;
}

This grid is fully responsive without a single media query. On large screens you get 3 or 4 columns. On tablets, 2 columns. On phones, a single column. And because we used auto-fit, the cards always stretch to fill the available width.

Real-World Code: Dashboard Layout With auto-fill

If you are building a dashboard where widget sizes should stay consistent:

.dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.widget {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  min-height: 200px;
}

With auto-fill, a dashboard containing only 2 widgets on a wide monitor will not stretch them to absurd widths. They stay at a comfortable reading size while the grid reserves space for more widgets to be added.

Common Mistakes to Avoid

• Using a fixed max in minmax(): Writing minmax(200px, 300px) limits the stretching ability of auto-fit. Use 1fr as the max if you want items to expand.
• Forgetting the gap in your calculations: The gap between columns affects how many columns fit. A 20px gap with 200px min columns means you need at least 220px per column slot.
• Assuming the difference always matters: If your grid row is always full of items, auto-fill and auto-fit are identical. Only switch between them when you actually have fewer items than available tracks.
• Using auto-fit for grids where items load dynamically: If content loads asynchronously and items appear one by one, auto-fit can cause jarring layout shifts as items jump from stretched to normal size. Consider auto-fill for smoother loading behavior.

Browser Support in 2026

Both auto-fill and auto-fit have had excellent browser support for years. As of early 2026, they work in:

• Chrome, Edge (and all Chromium-based browsers)
• Firefox
• Safari (desktop and iOS)
• Samsung Internet
• Opera

There is no reason to avoid either keyword in production today. CSS Grid itself is supported by over 97% of browsers globally.

Decision Flowchart: Which Should You Choose?

Ask yourself these questions in order:

1. Will the grid row always be full of items? If yes, it does not matter. Pick either one.
2. Do you want items to stretch and fill available space? Use auto-fit.
3. Do you want consistent item sizes with reserved space for future items? Use auto-fill.
4. Are you building a gallery or hero section? Likely auto-fit.
5. Are you building a dashboard or product listing? Consider auto-fill.

FAQ

What is the difference between auto-fill and auto-fit in CSS Grid?

auto-fill creates as many column tracks as possible, keeping empty tracks at their defined size. auto-fit also creates those tracks but collapses any empty ones to zero, allowing the existing items to stretch and fill the available space. The difference is only visible when there are fewer items than the grid could hold.

When does auto-fit and auto-fill produce the same result?

They produce identical results whenever the number of grid items is enough to fill the entire row. The behavioral difference only appears when there is leftover space that would result in empty column tracks.

Can I use auto-fit or auto-fill with rows instead of columns?

Yes. You can use grid-template-rows: repeat(auto-fill, minmax(100px, 1fr)) or the auto-fit equivalent. However, this requires the grid container to have a defined height so the browser knows how many rows can fit.

Which CSS Grid generator is the best for learning auto-fill and auto-fit?

Tools like CSS Grid Generator by Layoutit and the Firefox DevTools Grid Inspector are great for visualizing track creation. The Firefox inspector is especially helpful because it shows you empty tracks, making the auto-fill vs auto-fit difference immediately visible.

Do I always need minmax() with auto-fill or auto-fit?

Not strictly. You can write repeat(auto-fill, 200px) with a fixed size. But using minmax() with 1fr as the maximum is what gives auto-fit its stretching ability and makes both keywords most useful for responsive design.

How do auto-fit and auto-fill affect accessibility?

Neither keyword changes the DOM order or the accessibility tree. Screen readers will still read items in their source order. However, because auto-fit can cause items to be wider, make sure your content remains readable at all widths and that touch targets remain appropriately sized on mobile.