@supports is how grid ships this year

Grid is in Chrome, Firefox, Safari and Edge and is not in IE11 in any form anyone should target — the 2011 prefixed implementation is a different specification. A feature query keeps both layouts in one stylesheet.

.cards { display: flex; flex-wrap: wrap; }
.cards > * { flex: 1 1 16rem; }

@supports (display: grid) {
    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
    .cards > * { flex: none; }   /* undo the fallback */
}

Writing the fallback first and the enhancement inside the query is the order that works, because a browser without @supports never sees the second block. The line people forget is undoing the fallback properties — a leftover flex or margin from the first block still applies inside the grid and produces spacing nobody can account for.