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(16rem, 1fr));
gap: 1rem;
}
/* auto-fill leaves empty tracks; auto-fit collapses them.
with 1fr that is the difference between cards that keep
their width and cards that stretch to fill the row. */The auto-fill versus auto-fit distinction is the one worth internalising, because with a single item in the container they behave completely differently and the choice is rarely deliberate. minmax(0, 1fr) rather than a bare 1fr is the guard against grid children with long unbreakable content blowing the column out — the most common grid layout bug and the one that takes an hour to find.