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

In CSS Grid, auto-fill fills the row with as many columns as possible, including empty ones, while auto-fit behaves similarly but collapses empty columns to zero width. Use auto-fit to make grid items stretch and fill available space, and auto-fill to keep fixed column sizes even if some are empty.

Quick Comparison

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

Feature	auto-fill	auto-fit
Behavior with extra space	Fills row with as many columns as fit, keeps empty columns visible	Fills row but collapses empty columns to zero width
Empty columns	Remain visible and take space	Collapsed and do not take space
Grid item stretching	Does not stretch empty columns	Stretches items to fill available space
Use case	Fixed column size, consistent grid structure	Flexible columns that adapt to container size
Visual effect	May show gaps if fewer items	Items expand to fill gaps

Key Differences

auto-fill and auto-fit are both used with the repeat() function in CSS Grid to create responsive columns or rows. The main difference is how they handle empty tracks (columns or rows) when there is extra space.

With auto-fill, the grid creates as many columns as will fit in the container, even if some columns have no content. These empty columns still take up space, which can create visible gaps if there are fewer items than columns.

On the other hand, auto-fit also creates as many columns as fit, but it collapses any empty columns to zero width. This means the grid items stretch to fill the available space, making the layout more flexible and avoiding gaps.

In summary, use auto-fill when you want a fixed number of columns regardless of content, and auto-fit when you want the grid to adapt and stretch items to fill space.

Code Comparison

This example shows a grid with fixed 150px columns using auto-fill. It creates as many 150px columns as fit, including empty ones if there are fewer items.

css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background-color: #4a90e2;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}

Output

A grid with multiple blue boxes each 150px wide, with empty columns visible if container is wide and fewer items exist.

auto-fit Equivalent

This example uses auto-fit instead. Empty columns collapse, and the grid items stretch to fill the available space, making the layout more flexible.

css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

.item {
  background-color: #e94e77;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}

Output

A grid with multiple pink boxes that stretch to fill the container width, no empty columns visible.

When to Use Which

Choose auto-fill when you want a consistent grid structure with fixed column sizes, even if some columns remain empty. This is useful for layouts where you want to reserve space for potential content or maintain alignment.

Choose auto-fit when you want your grid items to stretch and fill the available space dynamically, collapsing empty columns. This is ideal for flexible, responsive designs where you want to avoid gaps and make the best use of container space.

Key Takeaways

auto-fill keeps empty columns visible, preserving fixed grid structure.

auto-fit collapses empty columns and stretches items to fill space.

Use auto-fill for consistent column counts regardless of content.

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

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