Auto-fill vs Auto-fit in CSS Grid: Key Differences and Usage

auto-fill and auto-fit are CSS Grid keywords that control how columns or rows fill available space. auto-fill fills the row with as many tracks as possible, even if empty, while auto-fit collapses empty tracks, letting existing items stretch to fill space.

Quick Comparison

Here is a quick side-by-side comparison of auto-fill and auto-fit in CSS Grid.

Factor	auto-fill	auto-fit
Tracks created	Creates as many tracks as fit, including empty ones	Creates as many tracks as fit, but collapses empty tracks
Empty tracks behavior	Empty tracks remain visible, reserving space	Empty tracks collapse, allowing items to stretch
Effect on item size	Items keep fixed size, empty tracks stay	Items stretch to fill space if empty tracks collapse
Use case	When you want fixed track sizes and consistent grid structure	When you want items to expand and fill available space
Visual gap	May leave gaps if fewer items than tracks	No gaps; items stretch to fill space

Key Differences

auto-fill and auto-fit are used with the repeat() function in CSS Grid to create responsive columns or rows. Both try to fit as many tracks as possible based on the container size and minimum track size.

The main difference is how they handle empty tracks when there are fewer grid items than the maximum tracks that fit. auto-fill keeps those empty tracks visible, preserving the grid structure and leaving blank spaces. This is useful when you want consistent columns regardless of content.

In contrast, auto-fit collapses empty tracks, allowing the existing grid items to stretch and fill the available space. This results in a more flexible layout where items grow to use leftover space, avoiding gaps.

Code Comparison

Using auto-fill to create responsive columns with fixed minimum size and gaps.

css

container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  background: #eee;
  padding: 10px;
}
.item {
  background: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}

Output

A grid with multiple green boxes each 150px wide minimum, arranged in rows with gaps, leaving empty columns if container is wide and items are fewer.

auto-fit Equivalent

Using auto-fit for the same layout, but items stretch to fill space if fewer than max columns.

css

container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  background: #eee;
  padding: 10px;
}
.item {
  background: #2196F3;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}

Output

A grid with blue boxes that stretch wider to fill the row if there are fewer items than columns, no empty gaps.

When to Use Which

Choose auto-fill when you want a consistent grid layout with fixed track sizes and visible empty columns or rows. This is good for designs where the grid structure should remain stable regardless of content count.

Choose auto-fit when you want a flexible layout where grid items expand to fill leftover space, avoiding gaps. This works well for responsive designs that adapt fluidly to different screen sizes and item counts.

Key Takeaways

auto-fill keeps empty grid tracks visible, preserving grid structure.

auto-fit collapses empty tracks, letting items stretch to fill space.

Use auto-fill for fixed-size columns and consistent layout.

Use auto-fit for flexible, gap-free responsive grids.

Both work with repeat() and minmax() for responsive design.