Responsive CSS Grid cards

auto-fill combined with minmax() lets the grid figure out its own column count without a single media query.

Code

<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem">
  <div style="background:#eee;padding:1rem;border-radius:8px">Card 1</div>
  <div style="background:#eee;padding:1rem;border-radius:8px">Card 2</div>
  <div style="background:#eee;padding:1rem;border-radius:8px">Card 3</div>
</div>

Preview

Explanation

auto-fill creates as many columns of at least 180px as fit in a row; 1fr stretches them evenly to fill the remaining space.

auto-fit instead of auto-fill stretches the last, partial row of cards to fill the full width when there are few items.

Related tools

Center an element horizontally and vertically

The simplest modern way to center a block using flexbox.