How do grid auto-fit and auto-fill change a responsive card layout?

Both modes repeat as many columns as can fit, subject to the track sizing and the available container width. The difference shows up when there’s room for more columns than there are cards: auto-fill leaves the unoccupied tracks in place, while auto-fit collapses empty tracks after items are placed. A track counts as empty only if no in-flow grid item is placed in it or spans across it. [S1]

With flexible 1fr tracks, the practical result is usually that cards using auto-fit expand to use the space freed by collapsed tracks. With auto-fill, the empty tracks still take part in the layout, so occupied cards may stay narrower. [S1] The difference is about the grid’s behavior, not a different number of cards.

Yes. Keep the minimum card size and gap the same, and change only the repeat mode:

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

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

Here, 200px is an example minimum, not a universal recommendation. A minmax() track gives each column a minimum size and lets it grow; the 1fr maximum distributes available space among flexible tracks. [S2] If you have two cards but the container can fit four columns at that minimum, the auto-fit version can collapse the two empty tracks and let the occupied columns grow. The auto-fill version preserves the empty tracks. The exact widths still depend on the container, gap, minimum size, and items. [S1]

Choose auto-fill when preserving the column pattern matters more than making a small number of cards fill the row. For example, if a listing may have only a few results but you want its columns to keep the same general placement as the grid gains items, test auto-fill with your real container width and minimum card size.

Choose auto-fit when you’d rather the available cards use the row’s spare space. That can be a better visual fit for a short row, but a card may become much wider than it is in a full row. Neither choice guarantees a particular card width: track sizing and the layout determine the result. [S1]

Use a small comparison with your actual card content. Keep the markup, minmax() values, and gap identical; test both modes at the same wide container size with one card, two cards, and a full row. Check whether the cards become uncomfortably wide with auto-fit, or look unexpectedly narrow with auto-fill. Then check a narrow container too, since fewer columns will fit there.

For example, if your grid fits four minimum-width columns but currently has two cards, the key question is: should those two cards expand into the unused space, or should the layout retain the empty column tracks? That’s the choice the two declarations make. The behavior described here does not establish a universally better option; the intended appearance and your track sizing decide.