CSS Grid can build a responsive card layout with almost no media queries. The key is auto-fit with minmax:

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

Each card is at least 260px wide. The browser fits as many columns as the space allows, and the cards stretch to fill the row. On a phone you get one column, and on a wide monitor you get three or four.

A few tips:

  • Use gap instead of margins so spacing stays even.
  • Keep card content flexible, since fixed heights cause overflow.
  • Test with real content, because long titles reveal layout problems quickly.

This is the same idea behind the project cards on this site.