A responsive grid with fewer breakpoints

Let the cards choose their columns

A list of similarly sized cards is a good fit for Grid. repeat, auto-fit, and minmax let the browser fit as many columns as the container can support. The inner min prevents the minimum column size from overflowing a very narrow container.

.cards {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 17rem), 1fr)
  );
  gap: 1.5rem;
}

Give the page a sensible outer boundary

Readable layouts need both a maximum width and space around the edges. A fluid container provides that boundary without fixing the page to a particular device size. Keep long prose narrower than a multi-column card list.

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

.prose {
  max-width: 65ch;
}

Fix the children before adding a breakpoint

An unexpectedly wide code block or an unbroken URL can force a grid item beyond its intended size. Set min-width: 0 on the item when necessary, allow long prose links to wrap, and give code blocks their own horizontal scrolling region. A breakpoint cannot fix every overflow problem.

Use media queries for a real change

Sometimes the design should change: navigation becomes a stacked row, a sidebar moves below the article, or a decorative figure disappears. Add a media query at the width where that change becomes useful. Test intermediate widths, not just the familiar phone and desktop presets.