responsive-patterns

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("rules/css-subgrid.md") for CSS Subgrid patterns: nested grid alignment, card layouts with aligned titles/content/actions, two-dimensional subgrid.

Load Read("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("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("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("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

Anti-Patterns (FORBIDDEN)

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

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("references/<file>"):

File	Content
`container-queries.md`	Container query patterns
`fluid-typography.md`	Accessible fluid type scales