What is the difference between auto-fit and auto-fill in Grid?

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

When there are fewer items than columns that would fit:

• auto-fill keeps the empty tracks → items stay their size, packed left.
• auto-fit collapses empty tracks to 0 → the remaining items stretch across the full width.

They behave identically once a row is full. If you don't want one or two cards ballooning, choose auto-fill.