# CSS Responsive Layouts
−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 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)
−- Implementing container-responsive components that adapt to their parent's size
+- 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
−- Using modern CSS features: container queries, `aspect-ratio`, `dvh`, subgrid
+- Debugging layouts with modern DevTools (Chrome 146+ adds denser grid inspection and other layout tooling)
## 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
