If a responsive CSS Grid seems to have invisible columns, empty repeated tracks may still be taking up room. The key difference in auto-fill vs auto-fit is what happens after grid items are placed: auto-fill keeps empty slots, while auto-fit collapses them so occupied flexible tracks can use the freed space.
How auto-fill and auto-fit choose the number of columns
Both keywords are used inside repeat() and initially calculate repeated tracks the same way. When the grid container has a definite size—or a maximum size that can be used for the calculation—the browser fits the largest number of tracks that will not overflow. When the relevant size is indefinite in the cases defined by the Grid specification, the auto-repeat count falls back to one.
As an Amazon Associate I earn from qualifying purchases.
The count is only the first part of the behavior. Once grid items are placed, auto-fill retains unused repeated tracks; auto-fit collapses them. MDN describes the distinction this way: “The auto-fit value behaves the same as auto-fill, except that after placing the grid items any empty repeated tracks are collapsed.” (MDN Web Docs: repeat() CSS function)
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →What happens to empty tracks and gaps?
| Behavior after placement | auto-fill |
auto-fit |
|---|---|---|
| Empty repeated tracks | Remain in the grid and reserve their space. | Collapse if empty. |
| Gutters beside collapsed tracks | Remain as part of the grid’s gaps. | Collapse along with the track. |
| Occupied flexible tracks | Do not gain space from empty tracks, because those tracks remain. | Can expand into space no longer occupied by collapsed tracks. |
For this rule, an empty track has no in-flow grid item placed in it or spanning across it. A collapsed track behaves as a fixed 0px track, and its neighboring gutters collapse too. These details explain why the two layouts can look identical when all fitted tracks have content but diverge when there are fewer items than available slots. (W3C CSS Grid Layout Module Level 1)
#1 Best Overall
Which keyword should you use?
Choose auto-fill to reserve open slots
Use auto-fill when keeping the grid’s potential columns matters more than stretching the current items. Empty tracks remain available as reserved space, which can be useful when the layout is meant to preserve slots for items that may appear later.
Choose auto-fit to spread the current items
Use auto-fit when you want the items already present to make fuller use of the available width. Once empty tracks collapse, occupied tracks with a flexible maximum can expand into the space they free. Neither keyword is universally better: choose based on whether empty slots should remain visible as reserved layout space.
Rank #2
A responsive card-grid example
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
}Here, minmax(12rem, 1fr) gives each repeated track a minimum size and a flexible maximum. The browser determines how many tracks fit from the available sizing; this does not promise that every card will be exactly 12rem wide. With auto-fit, any empty repeated tracks collapse after placement, so occupied flexible tracks can grow. To reserve the empty slots instead, replace auto-fit with auto-fill.
Free tools Windows power users keep installed
One-click scans. No signup required.
Check the auto-repeat track-size syntax
Auto-repeat works only with allowed fixed-size forms in the repeated track list. The permitted syntax depends on the track-size function and, for minmax(), whether its minimum and maximum satisfy the auto-repeat constraints. Line names can also affect the valid form. If a declaration is rejected or does not behave as expected, check the MDN repeat() reference for the grammar and examples rather than assuming every track definition can be placed inside an auto-repeat.
Quick Recap
Rank #3
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
