Modern responsive design goes beyond media queries. Container queries let components adapt to their container rather than the viewport. Anchor positioning lets elements tether and position relative to other elements (useful for tooltips, popovers, anchored container queries). Use dynamic viewport units (svh, lvh, dvh) for robust full-height layouts on mobile. Fluid typography with clamp() scales smoothly without hard breakpoints. CSS Grid and Flexbox handle complex layouts intrinsically. This skill covers the patterns that make interfaces adapt gracefully from 320px phones to ultrawide monitors, plus modern layout debugging tips.
When to use
Building any layout that must work across mobile, tablet, and desktop
Implementing container-responsive components that adapt to their parent's size (container queries)
Tethering UI (tooltips, popovers, menus) to elements with CSS-only anchoring (anchor positioning)
Setting up fluid typography and spacing that scales without breakpoint jumps
Creating grid-based layouts with dynamic column counts
Building responsive navigation, sidebars, or dashboards
Using modern CSS features: container queries, position-* anchor properties, aspect-ratio, svh/lvh/dvh, subgrid
Debugging layouts with modern DevTools (Chrome 146+ adds denser grid inspection and other layout tooling)
When NOT to use
Animation and motion concerns — use Framer Motion or GSAP skills
Design token architecture — use Tailwind Design System skill
JavaScript-based layout logic (virtualization, infinite scroll) — those are component architecture concerns
Print stylesheets — different optimization goals
Core concepts
Container queries vs. media queries
Feature
Media query
Container query
Responds to
Viewport size
Container size
Use for
Page-level layout
Component-level adaptation
Syntax
@media (min-width: 768px)
@container (min-width: 400px)
Reusability
Component behaves differently based on where it is placed
Container queries are stable and widely available in modern browsers; use them for component-scoped breakpoints (MDN container queries guide).
Anchor positioning (tethered elements)
The Anchor Positioning module introduces anchor-related properties and functions to position an element relative to another (anchor) element. Use cases: tooltips, popovers, menus, anchored container queries. Key capabilities:
Declare anchors (anchor-name / anchor-scope) on anchor elements
Position anchored elements using position-anchor, position-area, and the anchor()/anchor-size() functions
Provide alternative positions and auto-fallbacks with position-try-* properties so anchored elements avoid overflow
Control visibility of anchored elements with position-visibility
High-level example (read MDN for exact syntax and the most current property names):
Mark the anchor element (e.g., a button) with an anchor name.
Use position-anchor / anchor() on the tooltip/popover to tether it to the anchor.
Add position-try-fallbacks to define alternate placements when the primary placement would overflow.
This module is in active deployment (W3C updates during 2025); expect author adoption to increase across 2026–2027 as interoperability improves (see W3C updates and MDN anchor positioning guide).
Fluid sizing with clamp()
/* Fluid font: min 1rem, preferred 0.5rem + 2vw, max 2rem */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
/* Fluid spacing: min 1rem, preferred 2vw + 0.5rem, max 3rem */
padding: clamp(1rem, 2vw + 0.5rem, 3rem);
/* Fluid gap */
gap: clamp(0.75rem, 1.5vw, 2rem);
When using viewport units inside clamp(), prefer min()/max() where appropriate to avoid overflow.
Container queries are the preferred mechanism for component-scoped responsiveness; use media queries for page-level layout decisions.
3. Use fluid type and spacing
Define the type scale with clamp() in your token system. Apply to headings, body, and spacing.
4. Tether UI with anchor positioning (where appropriate)
When positioning elements relative to other elements (popovers, tooltips, anchored container queries), anchor positioning provides a CSS-native alternative to JS calculations. Use position-try-fallbacks to ensure the UI automatically chooses an alternate placement if the primary one would overflow.
Sidebar + main content? → grid-template-columns: fit-content(Npx) 1fr
Cards need aligned internal rows? → Subgrid
Smooth type/spacing scaling? → clamp() with viewport units
Full-height mobile section? → min-height: 100dvh
Responsive image ratio? → aspect-ratio
Edge cases and gotchas
Container query support — Container queries are broadly supported in modern browsers. Provide reasonable fallbacks for older browsers and test components in multiple contexts (MDN and W3C drafts are good references).
Dynamic viewport units — Use dvh/svh/lvh for mobile full-height layouts. On older browsers these units may not be available; fall back to vh or JS-calculated heights if necessary (check Can I Use for current support data).
Subgrid browser support — Subgrid support has improved in recent years; still test targets and provide fallback patterns where needed.
Anchor positioning interoperability — Anchor Positioning is an evolving module (W3C updates in 2025). Test anchored UI across browsers and use position-try-fallbacks to mitigate overflow/visibility issues.
min() in minmax() — Use minmax(min(280px, 100%), 1fr) to prevent grid overflow on small screens where a fixed minimum would exceed the container width.
Touch targets — Minimum 44x44px for touch targets on mobile. Use padding, not just content size, to reach the minimum.
Horizontal scroll — Never allow unintentional horizontal scroll at any breakpoint. Test at 320px width and zoom to 200%.
Evaluation criteria
Mobile-first approach: base styles work at 320px, enhanced upward
Container queries used for component-level responsiveness
Anchor positioning used for tethered UI where appropriate, with try-fallbacks configured
Typography is fluid with clamp() (no abrupt size jumps)
Grid layouts use auto-fill/auto-fit with minmax() for dynamic columns
Touch targets are minimum 44x44px on mobile
No horizontal scroll at any breakpoint (320px to ultrawide)
Dynamic viewport units (dvh/svh/lvh) used for mobile full-height layouts when supported
aspect-ratio used for consistent media proportions
Navigation is usable on mobile (hamburger or collapsible pattern)
References and further reading:
MDN: CSS container queries guide
MDN: CSS anchor positioning guide
Chrome Developer Blog: What's new in DevTools (Chrome 146)
W3C CSS Working Group drafts (container queries, anchor positioning, viewport units)
Agent docs
4 attached
Codex — CSS Responsive Layouts
Environment
Sandboxed, file I/O only. No browser preview — ensure CSS is structurally valid and follows mobile-first methodology.
When this skill is active
Use container queries for component-level responsiveness.
Use clamp() for fluid typography and spacing.
Start mobile-first: base styles for smallest viewport, enhance upward.
Touch targets must be minimum 44x44px on mobile.
Test at 320px width and 200% zoom (verify no horizontal scroll).
Tool usage
Generate responsive layout components in components/layouts/.
Define fluid token scales in the global CSS @theme block.
Place responsive navigation in components/ui/ResponsiveNav.tsx.
Use Tailwind's @container variant for container-query-based responsive classes.
Testing expectations
Build must succeed: all CSS syntax valid for Tailwind v4.
Verify no fixed widths that could cause overflow on small screens.
Check that container query contexts (@container) are set on parent elements.
Verify touch targets are at least 44x44px (padding counts).
Common failure modes
Missing container-type: inline-size on the parent of container-queried children.
Using minmax(280px, 1fr) without min(280px, 100%) — overflows small screens.
Fixed-width elements (w-[500px]) that cause horizontal scroll on mobile.
Not testing at 200% zoom (content becomes unreadable or overflows).
Using vh instead of dvh for mobile full-height sections.
Output format
Layout components in components/layouts/.
Responsive utilities in global CSS.
Navigation components with mobile toggle in components/ui/.
Activity
PausedMonday · 9:00 AM5 sources
Automation & run history
Automation status and run history. Only the owner can trigger runs or edit the schedule.
Scan CSS WG drafts for container-query, anchor-positioning, and viewport-unit spec changes. Check Chrome DevTools blog for new layout debugging tools. Update breakpoint strategies, fluid typography formulas, and grid/flex patterns.
Latest refresh trace
Reasoning steps, source results, and the diff that landed.
Apr 6, 2026 · 9:06 AM
triggerAutomation
editoropenai/gpt-5-mini
duration146.3s
statussuccess
web searches3
sources discovered+1
Revision: v2
This update brings the skill up to date with recent layout platform features and tooling: it integrates anchor positioning (tethered UI) guidance, mentions dynamic viewport units (svh/lvh/dvh) for robust mobile full-height layouts, and adds a short DevTools section highlighting Chrome 146 layout debugging improvements. The text clarifies when to prefer container queries vs media queries, points readers to compatibility resources, and preserves the original practical code patterns.
- Added a DevTools section summarizing Chrome 146 layout debugging features
- Added guidance for CSS Anchor Positioning (tethered UI) and recommendations to use position-try fallbacks
- Included explicit mention of dynamic viewport units (svh/lvh/dvh) and advice to check compatibility
- Kept existing examples and grid/flex patterns, clarified container query usage and containment context
- Added W3C drafts as a tracked source recommendation
−Modern responsive design goes beyond media queries. Container queries let components adapt to their container rather than the viewport. Fluid typography with `clamp()` scales smoothly without breakpoints. CSS Grid and Flexbox handle complex layouts intrinsically. This skill covers the patterns that make interfaces adapt gracefully from 320px phones to ultrawide monitors.
+Modern responsive design goes beyond media queries. Container queries let components adapt to their container rather than the viewport. Anchor positioning lets elements tether and position relative to other elements (useful for tooltips, popovers, anchored container queries). Use dynamic viewport units (svh, lvh, dvh) for robust full-height layouts on mobile. Fluid typography with `clamp()` scales smoothly without hard breakpoints. CSS Grid and Flexbox handle complex layouts intrinsically. This skill covers the patterns that make interfaces adapt gracefully from 320px phones to ultrawide monitors, plus modern layout debuggingtips.
## When to use
- Building any layout that must work across mobile, tablet, and desktop
+- Implementing container-responsive components that adapt to their parent's size (container queries)
−- Implementingcontainer-responsivecomponentsthatadapt to theirparent'ssize
+- TetheringUI(tooltips,popovers,menus) to elements with CSS-onlyanchoring(anchorpositioning)
- Setting up fluid typography and spacing that scales without breakpoint jumps
- Creating grid-based layouts with dynamic column counts
- Building responsive navigation, sidebars, or dashboards
+- Using modern CSS features: container queries, `position-*` anchor properties, `aspect-ratio`, `svh`/`lvh`/`dvh`, subgrid
−- Using modern CSSfeatures:containerqueries,`aspect-ratio`,`dvh`,subgrid
+- Debugging layoutswith modern DevTools (Chrome 146+ addsdensergridinspectionandotherlayouttooling)
## When NOT to use
@@ −38 +40 @@
.card { grid-template-columns: auto 1fr; }
}
```
+
+Container queries are stable and widely available in modern browsers; use them for component-scoped breakpoints (MDN container queries guide).
+
+### Anchor positioning (tethered elements)
+
+The Anchor Positioning module introduces anchor-related properties and functions to position an element relative to another (anchor) element. Use cases: tooltips, popovers, menus, anchored container queries. Key capabilities:
+
+- Declare anchors (anchor-name / anchor-scope) on anchor elements
+- Position anchored elements using `position-anchor`, `position-area`, and the `anchor()`/`anchor-size()` functions
+- Provide alternative positions and auto-fallbacks with `position-try-*` properties so anchored elements avoid overflow
+- Control visibility of anchored elements with `position-visibility`
+
+High-level example (read MDN for exact syntax and the most current property names):
+
+- Mark the anchor element (e.g., a button) with an anchor name.
+- Use `position-anchor` / `anchor()` on the tooltip/popover to tether it to the anchor.
+- Add `position-try-fallbacks` to define alternate placements when the primary placement would overflow.
+
+This module is in active deployment (W3C updates during 2025); expect author adoption to increase across 2026–2027 as interoperability improves (see W3C updates and MDN anchor positioning guide).
### Fluid sizing with clamp()
@@ −51 +72 @@
/* Fluid gap */
gap: clamp(0.75rem, 1.5vw, 2rem);
```
+
+When using viewport units inside `clamp()`, prefer `min()`/`max()` where appropriate to avoid overflow.
### Grid patterns
Research engine
CSS Responsive Layouts now treats its source set as a research system: canonical feeds for concrete deltas, index-like sources for discovery, and query hints for ranking.
Monitor 4 feed-like sources for release notes, changelog entries, and durable upstream deltas.
2. Discover net-new docs and leads
Scan 0 discovery-oriented sources such as docs indexes and sitemaps, then rank extracted links against explicit query hints instead of trusting nav order.
3. Transplant from trusted upstreams
Keep the skill grounded in trusted source deltas even when there is no direct upstream skill pack to transplant from.
4. Keep the sandbox honest
Ship prompts, MCP recommendations, and automation language that can actually be executed in Loop's sandbox instead of abstract advice theater.
DescriptionWhen to useCore conceptsDevTools and debuggingEdge cases and gotchas
status
success
triggerAutomation
editoropenai/gpt-5-mini
duration146.3s
Diff▶
+19−1
+Generated: 2026-04-06T09:04:03.019Z
+Summary: This update brings the skill up to date with recent layout platform features and tooling: it integrates anchor positioning (tethered UI) guidance, mentions dynamic viewport units (svh/lvh/dvh) for robust mobile full-height layouts, and adds a short DevTools section highlighting Chrome 146 layout debugging improvements. The text clarifies when to prefer container queries vs media queries, points readers to compatibility resources, and preserves the original practical code patterns.
+What changed: - Added a DevTools section summarizing Chrome 146 layout debugging features
+- Added guidance for CSS Anchor Positioning (tethered UI) and recommendations to use position-try fallbacks
+- Included explicit mention of dynamic viewport units (svh/lvh/dvh) and advice to check compatibility
+- Kept existing examples and grid/flex patterns, clarified container query usage and containment context
+- Added W3C drafts as a tracked source recommendation
+Body changed: yes
+Editor: openai/gpt-5-mini
+Changed sections: Description, When to use, Core concepts, DevTools and debugging, Edge cases and gotchas
+- Track adoption and support metrics for anchor positioning and subgrid across major browsers
+- Experiment with fluid typography mixes: clamp() vs fluid scales using CSS locks and measure layout stability
+Signals:
+- A Practical Guide To Design Principles (Smashing Magazine)
+- Chrome 147 enables concurrent and nested view transitions with element-scoped view transitions (Chrome Developer Blog)
+- New to the web platform in March (web.dev)
−
+- Testing Font Scaling For Accessibility With Figma Variables (Smashing Magazine)
Update history1▶
Apr 6, 20264 sources
This update brings the skill up to date with recent layout platform features and tooling: it integrates anchor positioning (tethered UI) guidance, mentions dynamic viewport units (svh/lvh/dvh) for robust mobile full-height layouts, and adds a short DevTools section highlighting Chrome 146 layout debugging improvements. The text clarifies when to prefer container queries vs media queries, points readers to compatibility resources, and preserves the original practical code patterns.