responsive-design

Define a containment context with container-type: inline-size on the parent, then use @container rules to style children based on the container's width rather than the viewport. Container query units like cqi let you size elements relative to the container.

Use clamp(min, preferred, max) where the preferred value combines a rem base with a vw term, such as clamp(1rem, 0.9rem + 0.5vw, 1.125rem). This scales font size smoothly between the minimum and maximum bounds as the viewport changes.

auto-fit collapses empty tracks so existing items stretch to fill the row, while auto-fill preserves empty column tracks. Use repeat(auto-fit, minmax(min(300px, 100%), 1fr)) for grids where items should expand when fewer items are present.

100vh includes space hidden behind mobile browser UI like address bars, causing content cutoff. Use 100dvh (dynamic viewport height) instead, which adjusts as browser chrome appears and disappears, or 100svh for the guaranteed minimum visible height.

Wrap the table in a container with overflow-x: auto and a min-width so it scrolls horizontally, or switch to a card-based layout below a breakpoint where each row becomes a stacked card with label-value pairs.

Use container queries when a component's layout should depend on the space it occupies rather than the viewport, such as cards reused in sidebars and main content. Media queries remain appropriate for page-level layout changes like overall grid structure.