This is probably the single most common confusion in all of CSS Grid: auto-fit and auto-fill look almost identical on the page, sit in the same place, use the exact same syntax, and yet produce two visually different results as soon as the grid holds fewer items than the number of columns that could fit.
Both keywords are used in place of a fixed number inside repeat() and minmax(), letting the browser work out on its own how many columns fit in the available space. The difference never shows up in documentation skimmed quickly, only in the rendered result, which makes it a classic trap even for people who have used Grid for years.
Definition
auto-fit and auto-fill are two values you can use instead of a number inside repeat(), to create as many columns as the available space allows, usually combined with fr unit. Both calculate the exact same number of possible columns. Their difference is only about what happens to the empty columns, the ones that could exist but that no item comes to fill.
The same code, two different words
.grid-fill {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.grid-fit {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}Picture a 900 pixel container with only two items, and a minimum column width of 150 pixels: six columns would fit in that space, but only two are occupied.
| Keyword | Empty columns | Visual result |
|---|---|---|
auto-fill | Kept, they exist but stay empty | Both items keep their 150px width, aligned to the left |
auto-fit | Collapsed to zero, they disappear | Both items stretch to fill the entire available width |
Why this difference goes unnoticed so often
As long as a grid holds more items than the number of possible columns, auto-fit and auto-fill produce exactly the same visual result: every column is occupied, so there is no empty column whose fate could diverge. The difference only shows up in the specific case where the number of items is smaller than the number of columns the space could hold, a common situation on a wide screen with little content, or while a still-incomplete list is loading.
auto-fit, the second for auto-fill.Spotting the difference in your own project
The simplest way to see the difference is to shrink the browser window until the grid ends up with fewer items than the number of possible columns, then watch whether the last items stretch or keep their size. Switching between auto-fit and auto-fill in the browser's developer tools, without reloading the page, is usually enough to settle which of the two matches the intended result.
A typical use case for each
auto-fit suits a card grid where every card should fill the useful space, a testimonial gallery for example, where three testimonials on a wide screen should spread out without leaving blank space. auto-fill suits better a grid where keeping a predictable column size matters more than filling the space, like a grid of regular thumbnails that should stay aligned the same way no matter how many items have loaded.
Frequently asked questions
auto-fit and auto-fill?No, the number of possible columns is calculated exactly the same way in both cases, based on the container's width and the minimum size given to minmax(). Only the behavior of the columns left empty after that calculation differs between the two keywords.
auto-fit over auto-fill?No, this is not a question of one being more modern or more recommended, only of the behavior you want. A product grid that should always look full benefits from auto-fit, while a grid where regular column alignment matters more than filling the space benefits from auto-fill.
Usually not, that is exactly the point of combining them with grid-template-columns and minmax(): the number of columns adjusts automatically to the screen width with no media query required. A media query only becomes useful again for finer adjustments, like changing the minimum size itself depending on the screen.