responsive

Use grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)) so the grid fits as many columns as the space allows. The min(18rem, 100%) wrapper prevents overflow on very narrow screens below 288px.

Use clamp() with a rem-based floor and ceiling plus a vw component, such as clamp(1rem, 0.95rem + 0.25vw, 1.125rem). Never use pure vw for body text because it breaks browser zoom, an accessibility requirement.

Use container queries for reusable components that must adapt to the space they receive, not the window width. A card with container-type: inline-size works in both a narrow sidebar and a wide main area without knowing its context.

The mobile Safari address bar shows and hides dynamically, but 100vh does not track that change, causing visible jumps. Use min-height: 100dvh for full-height sections, or svh when content must fit without scrolling.

Three usually suffice: around 640px, 1024px, and 1440px, derived from where your content actually breaks rather than device lists. More than five breakpoints signals the layout should be intrinsic instead.

An incorrect or missing sizes attribute makes the browser assume the image renders at full viewport width, so it downloads the largest srcset candidate. Set sizes to match the actual rendered width, and always include width and height attributes to prevent layout shift.