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

/* IMPORTANT: Always include rem in fluid typography */

/* This ensures user font preferences are respected */

/* ❌ WRONG: Viewport-only ignores user preferences */

font-size: 5vw;

/* ✅ CORRECT: Include rem to respect user settings */

font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

/* User zooming must still work */

@media (min-width: 768px) {

  /* Use em/rem, not px, for breakpoints in ideal world */

  /* (browsers still use px, but consider user zoom) */

}

Anti-Patterns (FORBIDDEN)

/* ❌ NEVER: Use only viewport units for text */

.title {

  font-size: 5vw; /* Ignores user font preferences! */

}

/* ❌ NEVER: Use cqw/cqh (use cqi/cqb instead) */

.card {

  padding: 5cqw; /* cqw = container width, not logical */

}

/* ✅ CORRECT: Use logical units */

.card {

  padding: 5cqi; /* Container inline = logical direction */

}

/* ❌ NEVER: Container queries without container-type */

@container (min-width: 400px) {

  /* Won't work without container-type on parent! */

}

/* ❌ NEVER: Desktop-first media queries */

.element {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

}

@media (max-width: 768px) {

  .element {

    grid-template-columns: 1fr; /* Overriding = more CSS */

  }

}

/* ❌ NEVER: Fixed pixel breakpoints for text */

@media (min-width: 768px) {

  body { font-size: 18px; } /* Use rem! */

}

/* ❌ NEVER: Over-nesting container queries */

@container a {

  @container b {

    @container c {

      /* Too complex, reconsider architecture */

    }

  }

}

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 systems

• ork:performance - CLS, responsive images, and image optimization

• ork: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