responsive-design

Modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first strategies.

- Container queries enable component-level responsiveness independent of viewport size, with support for container query units (cqi, cqw, cqh) and style queries

- Fluid typography and spacing via CSS clamp() scales smoothly across screen sizes with min/max bounds, eliminating discrete breakpoint jumps

- CSS Grid auto-fit/auto-fill patterns and Flexbox provide intrinsic layouts that adapt based on content; subgrid enables nested alignment

- Mobile-first media query approach with content-based breakpoints and feature queries (@supports) for progressive enhancement across browsers

Responsive Design

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

When to Use This Skill

- Implementing mobile-first responsive layouts

- Using container queries for component-based responsiveness

- Creating fluid typography and spacing scales

- Building complex layouts with CSS Grid and Flexbox

- Designing breakpoint strategies for design systems

- Implementing responsive images and media

- Creating adaptive navigation patterns

- Building responsive tables and data displays

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.