Responsive Patterns
Modern responsive design patterns using Container Queries, fluid typography, and mobile-first strategies for React applications (2026 best practices).
Overview
- Building reusable components that adapt to their container
- Implementing fluid typography that scales smoothly
- Creating responsive layouts without media query overload
- Building design system components for multiple contexts
- Optimizing for variable container sizes (sidebars, modals, grids)
Core Concepts
Container Queries vs Media Queries
| Feature |
Media Queries |
Container Queries |
| Responds to |
Viewport size |
Container size |
| Component reuse |
Context-dependent |
Truly portable |
| Browser support |
Universal |
Baseline 2023+ |
| Use case |
Page layouts |
Component layouts |
Modern CSS Layout
Load Read("${CLAUDE_SKILL_DIR}/rules/css-subgrid.md") for CSS Subgrid patterns: nested grid alignment, card layouts with aligned titles/content/actions, two-dimensional subgrid.
Load Read("${CLAUDE_SKILL_DIR}/rules/css-intrinsic-responsive.md") for intrinsically responsive layouts: auto-fit/minmax grids, clamp() for fluid everything, container queries for component logic, zero media query patterns.
Load Read("${CLAUDE_SKILL_DIR}/rules/responsive-foldables.md") for foldable/multi-screen device support: env(safe-area-inset-*), viewport segment queries, dual-screen layouts, progressive enhancement.
Key patterns covered: CSS Subgrid alignment, intrinsic responsive grids (auto-fit + minmax), fluid clamp() scales, foldable device layouts, safe area insets, viewport segment queries.
CSS Patterns
Load Read("${CLAUDE_SKILL_DIR}/rules/css-patterns.md") for complete CSS examples: container queries, cqi/cqb units, fluid typography with clamp(), mobile-first breakpoints, CSS Grid patterns, and scroll-queries.
Key patterns covered: Container Query basics, Container Query Units (cqi/cqb), Fluid Typography with clamp(), Container-Based Fluid Typography, Mobile-First Breakpoints, CSS Grid Responsive Patterns, Container Scroll-Queries (Chrome 126+).
React Patterns
Load Read("${CLAUDE_SKILL_DIR}/rules/react-patterns.md") for complete React examples: ResponsiveCard component, Tailwind container queries, useContainerQuery hook, and responsive images.
Key patterns covered: Responsive Component with Container Queries, Tailwind CSS Container Queries, useContainerQuery Hook, Responsive Images Pattern.
Accessibility Considerations
font-size: 5vw;
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
@media (min-width: 768px) {
}
Anti-Patterns (FORBIDDEN)
.title {
font-size: 5vw;
}
.card {
padding: 5cqw;
}
.card {
padding: 5cqi;
}
@container (min-width: 400px) {
}
.element {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.element {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) {
body { font-size: 18px; }
}
@container a {
@container b {
@container c {
}
}
}
Browser Support
| Feature |
Chrome |
Safari |
Firefox |
Edge |
| Container Size Queries |
105+ |
16+ |
110+ |
105+ |
| Container Style Queries |
111+ |
❌ |
❌ |
111+ |
| Container Scroll-State |
126+ |
❌ |
❌ |
126+ |
| cqi/cqb units |
105+ |
16+ |
110+ |
105+ |
| clamp() |
79+ |
13.1+ |
75+ |
79+ |
| Subgrid |
117+ |
16+ |
71+ |
117+ |
Rules
Each category has individual rule files in rules/ loaded on-demand:
| Category |
Rule |
Impact |
Key Pattern |
| Modern CSS Layout |
rules/css-subgrid.md |
HIGH |
CSS Subgrid for nested grid alignment, card layouts |
| Modern CSS Layout |
rules/css-intrinsic-responsive.md |
HIGH |
Intrinsic responsive layouts, auto-fit/minmax, clamp(), zero breakpoints |
| Modern CSS Layout |
rules/responsive-foldables.md |
MEDIUM |
Foldable devices, safe area insets, viewport segments |
| CSS |
rules/css-patterns.md |
HIGH |
Container queries, cqi/cqb, fluid typography, grid, scroll-queries |
| React |
rules/react-patterns.md |
HIGH |
Container query components, Tailwind, useContainerQuery, responsive images |
| PWA |
rules/pwa-service-worker.md |
HIGH |
Workbox caching strategies, VitePWA, update management |
| PWA |
rules/pwa-offline.md |
HIGH |
Offline hooks, background sync, install prompts |
| Animation |
rules/animation-motion.md |
HIGH |
Motion presets, AnimatePresence, View Transitions |
| Animation |
rules/animation-scroll.md |
MEDIUM |
CSS scroll-driven animations, parallax, progressive enhancement |
| Touch & Mobile |
rules/touch-interaction.md |
HIGH |
Touch targets (44px min), thumb zones, pinch-to-zoom, safe areas, gestures |
Total: 10 rules across 6 categories
Key Decisions
| Decision |
Option A |
Option B |
Recommendation |
| Query type |
Media queries |
Container queries |
Container for components, Media for layout |
| Container units |
cqw/cqh |
cqi/cqb |
cqi/cqb (logical, i18n-ready) |
| Fluid type base |
vw only |
rem + vw |
rem + vw (accessibility) |
| Mobile-first |
Yes |
Desktop-first |
Mobile-first (less CSS, progressive) |
| Grid pattern |
auto-fit |
auto-fill |
auto-fit for cards, auto-fill for icons |
Related Skills
design-system-starter - Building responsive design systemsork:performance - CLS, responsive images, and image optimizationork:i18n-date-patterns - RTL/LTR responsive considerations
Capability Details
container-queries
Keywords: @container, container-type, inline-size, container-name
Solves: Component-level responsive design
fluid-typography
Keywords: clamp(), fluid, vw, rem, scale, typography
Solves: Smooth font scaling without breakpoints
responsive-images
Keywords: srcset, sizes, picture, art direction
Solves: Responsive images for different viewports
mobile-first-strategy
Keywords: min-width, mobile, progressive, breakpoints
Solves: Efficient responsive CSS architecture
grid-flexbox-patterns
Keywords: auto-fit, auto-fill, subgrid, minmax
Solves: Responsive grid and flexbox layouts
container-units
Keywords: cqi, cqb, container width, container height
Solves: Sizing relative to container dimensions
References
Load on demand with Read("${CLAUDE_SKILL_DIR}/references/<file>"):
| File |
Content |
container-queries.md |
Container query patterns |
fluid-typography.md |
Accessible fluid type scales |
