CSS Grid auto-fit & auto-fill

CSS Grid auto-fit & auto-fill

The CSS Grid auto-fit and auto-fill keywords allow the browser to determine how many repeated tracks can fit within the available space.

They are used with repeat() and are commonly combined with minmax() to create responsive Grid layouts that automatically adjust the number and width of columns.

Automatic Track Repetition

A fixed repetition count tells the browser exactly how many tracks to create.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

This declaration always defines four explicit column tracks.

An auto-repeat replaces the fixed number with auto-fit or auto-fill.

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

The browser determines how many repeated tracks can fit within the Grid container according to the track sizing rules.

The auto-fill Keyword

The auto-fill keyword repeats tracks as many times as possible without overflowing the Grid container.

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

As the container becomes wider, additional tracks can be created. As it becomes narrower, fewer tracks fit on each row.

If there are fewer grid items than available tracks, auto-fill can preserve empty tracks in the repeated Grid.

The auto-fit Keyword

The auto-fit keyword also creates as many repeated tracks as can fit within the available space.

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

The important difference appears when some of the automatically created tracks are empty. With auto-fit, empty repeated tracks are collapsed.

When the maximum track size is flexible, such as 1fr, the remaining occupied tracks can then expand into the available space.

auto-fit vs auto-fill

The two keywords often produce the same appearance when enough grid items exist to occupy all of the repeated tracks.

Their difference becomes easier to see when the container has enough space for more tracks than there are items.

Neither keyword is universally better. The appropriate choice depends on how you want unused Grid space to behave.

Using minmax()

The most common responsive pattern combines an auto-repeat with minmax().

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

Each column is given a minimum track size of 200 pixels and a flexible maximum of 1fr.

The browser creates the number of columns that fit at the minimum track size and distributes available flexible space among the resulting tracks.

The same pattern can use auto-fill.

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

Responsive Grid Columns

Using auto-fit or auto-fill with minmax() allows the number of columns to respond to the available Grid container width.

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

When enough space is available, several card columns can appear on the same row. As the container becomes narrower, fewer columns fit and the remaining items continue onto additional rows.

This approach can handle many common responsive card layouts without media queries that manually change the number of columns at specific viewport widths.

Empty Grid Tracks

Empty tracks are the key to understanding the difference between auto-fill and auto-fit.

Suppose a container is wide enough for four repeated tracks but contains only three grid items.

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

With auto-fill, the fourth repeated track can remain in the Grid even though it contains no item.

With auto-fit, that empty repeated track is collapsed after placement. If the occupied tracks have flexible maximum sizes, they can grow to use the resulting available space.

Choosing auto-fit or auto-fill

Choose between the two keywords according to the desired behavior when the Grid has room for more tracks than there are items.

For many responsive card layouts, auto-fit is useful because the visible cards can expand to fill the row. Other layouts may benefit from the empty-track behavior of auto-fill.

auto-fit & auto-fill Example

The following example places the same three items in two Grid containers so you can compare the behavior directly.

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

Open the example in the editor and change the minimum track size. Drag the divider between the code and result panes to change the preview width and watch the number and size of the columns change.