Responsive Layouts With Modern CSS: A Field Guide

Responsive design stopped being "three fixed layouts" years ago, yet plenty of sites still break between the breakpoints. Modern CSS gives us fluid tools — clamp, container queries, intrinsic grids — that adapt continuously instead of snapping at arbitrary widths.

Type that scales itself

Fluid typography with clamp() sets a minimum, a preferred viewport-relative size and a maximum in one line. Headings grow smoothly from phone to monitor with no breakpoints at all, and body text stays in its comfortable reading measure everywhere.

Components that respond to their container

Container queries let a card change layout based on the space it actually gets, not the viewport. A component dropped into a sidebar, a grid or full width adapts on its own — which means fewer one-off overrides and layouts that survive redesigns.

• Design content-first: add breakpoints where the design breaks, not at device sizes.
• Test at 375, 768, 1024 and 1440px — plus everything in between.
• Keep touch targets at least 44px and never disable pinch zoom.

The goal isn't pixel-identical pages at every width. It's pages that feel designed at every width — and modern CSS finally makes that the default.