Responsive, without guessing the viewport

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

Goes on: the container of the repeated things.

The browser fits as many columns as there is room for and recounts whenever the space changes. It works in a sidebar, a modal and a full page without knowing which one it is in. The grid lesson takes the line apart.

What it replaced: a breakpoint for every column count.

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
}

Goes on: the element whose size should scale.

A minimum, a preferred value that grows with the viewport, and a maximum. No steps, so no width at which the heading suddenly looks wrong. Keep a rem term in the middle value, or the text stops responding to the reader’s zoom. The clamp calculator writes the middle term for you.

What it replaced: a font-size in each of three media queries.

.card-wrap { container-type: inline-size; }

@container (min-width: 360px) {
  .card { grid-template-columns: 140px 1fr; }
}

Goes on: container-type on a wrapper, the @container rule on what is inside it.

The same card is one column in a narrow sidebar and two in a wide article, on the same page, at the same moment. A media query cannot express that, because both cards see the same viewport. Build and test one in the container query builder.

Careful. An element cannot query itself, only an ancestor. That is why the rule needs a wrapper, and it is the usual reason a container query seems to do nothing.

.card-wrap  { container-type: inline-size; }
.card-title { font-size: clamp(1rem, 0.8rem + 3cqi, 1.75rem); }

Goes on: anything inside a container.

1cqi is one percent of the container’s inline size, the container’s answer to vw. The fluid headline in card two is actually sized this way, which is why it follows the box you drag and ignores the window.

.page { display: grid; grid-template-areas: "main" "side"; }

@media (width >= 60rem) {
  .page { grid-template-columns: 1fr 20rem;
          grid-template-areas: "main side"; }
}

Goes on: the few rules that arrange the page itself.

The viewport is the right thing to ask when the thing changing really is the page: whether the sidebar sits beside the content or under it. Use rem so the breakpoint moves with the reader’s font size, and let the content choose the number. Narrow the window until the layout looks cramped. That width is your breakpoint, whatever phone is popular this year.

@media (prefers-reduced-motion: no-preference) {
  .hero { animation: rise .6s both; }
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { translate: 0 -4px; }
}
@media (prefers-contrast: more) {
  .muted { color: inherit; }
}

Goes on: motion, hover effects and low-contrast decoration.

These have nothing to do with width, and they are the media queries that matter most. Write motion inside no-preference, so the calm version is the default and nobody has to opt out of being made dizzy. Hover styles belong inside (hover: hover), or they stick after a tap on a phone.

.hero {
  min-height: 100vh;    /* older browsers */
  min-height: 100svh;   /* the height with the browser bars showing */
}

Goes on: a section meant to fill the screen.

On a phone 100vh is the height with the address bar hidden, so the bottom of a full-height hero starts off the screen. svh is the small, safe height, lvh the large one, and dvh follows the bars as they move, which makes the layout shift while scrolling. For a hero, svh is nearly always the one.

What it replaced: a resize listener writing --vh into a custom property.