One rule. That's all it takes to turn the stack into a gallery.

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

The container around your six cards already has class="grid" — it has since you first built it, sitting there with no rule attached, waiting for exactly this. Add the rule and the six articles snap from a single column into as many columns as the screen holds.

Watch it earn each part of that middle line:

• Widen the window. As it passes each 280px-plus-gap threshold, the grid gains a column — one row of six becomes three-and-three, then two-and-two-and-two, filling the width without you touching a breakpoint.
• Narrow it. The columns drop away one by one, and on a phone it lands on a single column — the same stack you started with, now by choice rather than by default.
• The gap holds a steady 1.5rem between every card, horizontally and vertically, no matter how many columns there are.

This is the payoff of putting class="grid" there early and styling the cards before the layout: the markup never changed for the sake of the grid. Content first, arrangement last — and because the arrangement lives entirely in auto-fill and fr, it responds to the screen on its own, with not a single media query yet written.