A responsive card grid was a set of breakpoints each restating the column count, which is four rules describing one intention.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
/* auto-fill leaves empty tracks; auto-fit collapses them.
with a single item that is the whole difference. */The min(16rem, 100%) is the part usually missing, and without it the grid overflows its container on a narrow viewport because the minimum is larger than the space available. auto-fill versus auto-fit behaves identically until the row is not full, at which point one keeps the card at its size and the other stretches it — and the choice is rarely deliberate.