iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
If your responsive grid looks as though it has invisible columns, unused tracks may still be taking up space. In the auto-fill vs auto-fit choice, use auto-fill to reserve empty slots; use auto-fit to collapse empty slots so the items already present can use the freed space.
Why do the two keywords look alike at first?
Both keywords go inside repeat() in grid-template-columns or grid-template-rows. They use the same auto-repeat fitting behavior to determine how many tracks can fit. With a definite or maximum container size, the browser chooses the largest repeat count that does not cause overflow. In the documented indefinite-size cases, the repeat count falls back to one. MDN’s repeat() reference describes the syntax and fitting rules; the CSS Grid Layout Module Level 1 Candidate Recommendation specifies the track-sizing algorithm.
Because the count is determined before the keywords diverge, a grid can initially establish more repeated tracks than it has items to fill. The difference appears after grid items are placed.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWhat changes after grid items are placed?
| Behavior | auto-fill |
auto-fit |
|---|---|---|
| Empty repeated tracks | Remain in the grid. | Collapse if no in-flow grid item is placed in or spans across them. |
| Gutters beside empty tracks | Remain. | Collapse along with the empty tracks. |
| Occupied tracks with a flexible maximum | Do not gain the space occupied by retained empty tracks. | Can expand into space freed by collapsed tracks. |
MDN summarizes 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(). A collapsed track behaves as a fixed 0px track, and its neighboring gutters collapse too.
#1 Best Overall
Which one should you choose?
- Choose
auto-fillwhen empty slots should remain part of the layout—for example, when reserving space for items that may be added later matters. - Choose
auto-fitwhen the items currently present should spread across the available width instead of leaving unused tracks in place.
Neither keyword is inherently better. The deciding question is whether the empty slots should continue to occupy layout space.
How do you write a responsive grid that expands its cards?
This pattern sets a 12rem minimum for each track and gives it a flexible maximum:
Rank #2
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
}The browser fits as many tracks as the available sizing allows. The cards are not guaranteed to be exactly 12rem wide: that value is the minimum, while 1fr allows occupied tracks to share available space. To preserve unfilled slots instead, replace auto-fit with auto-fill.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →What syntax constraints should you check?
Auto-repeat is not valid with every possible track-size expression. The repeated track definition must use an allowed fixed-size form, and combinations involving minmax() or line names have specific grammar rules. Check the MDN repeat() syntax reference when adapting the pattern, especially if you change the minimum or maximum track sizing.
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.
