Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.

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 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 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("references/<file ") : File Content container queries.md Container query patterns fluid typography.md Accessible fluid type scales

responsive-patterns