Core concepts

Container queries vs. media queries

Container queries require a containment context:

.card-grid { container-type: inline-size; }

@container (min-width: 600px) {
  .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()

/* 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.

Grid patterns

Responsive auto-fill grid:

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.5rem;
}

Named grid areas:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  grid-template-columns: fit-content(280px) 1fr;
  grid-template-rows: auto 1fr auto;
}

@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "footer";
    grid-template-columns: 1fr;
  }
}

Subgrid for alignment:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.card {
  display: grid;
  grid-template-rows: subgrid;
}

Viewport units for full-height layouts

Mobile browser chrome (address bars) makes 100vh unreliable for full-height UIs. Use the dynamic viewport units where available:

• dvh (dynamic viewport height) — responds to transient UI changes
• svh (small viewport height) — viewport height when UI is smallest
• lvh (large viewport height) — viewport height when UI is largest

Example:

.mobile-full-height { min-height: 100dvh; }

Check compatibility tables (Can I Use / MDN) and provide graceful fallbacks where old browsers are targeted.

Workflow

1. Start mobile-first

Write base styles for the smallest viewport. Enhance upward with min-width media queries or container queries.

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 768px) {
  .layout {
    flex-direction: row;
  }
}

2. Set up container query contexts

<div class="cards" style="container-type:inline-size">
  <Card />
</div>

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.

5. Use aspect-ratio for media

.video-embed { aspect-ratio: 16 / 9; }
.square-avatar { aspect-ratio: 1; }
.card-image { aspect-ratio: 4 / 3; }

6. Use dynamic viewport units for full-height mobile layouts

Prefer dvh/svh/lvh over vh for mobile full-height containers when available and provide fallbacks for older browsers.

DevTools and debugging (Chrome 146+)

Chrome DevTools continues to add layout-focused tooling. Recent updates (Chrome 146) include:

• Denser grid layout inspection (better visibility for dense grids)
• Improved support for Adopted Style Sheets in the Styles panel
• Preserve console history edits and better console workflow features
• Privacy and accessibility debugging improvements

Practical tips:

• Use the Grid inspector to visually confirm track sizes, gaps, and implicit tracks when troubleshooting auto-fill/minmax() issues.
• Enable layout overlays to detect unintentional scroll and overflow.
• Reproduce mobile viewport issues with device emulation and test dvh vs vh behaviors.

(See Chrome Developer Blog: "What's new in DevTools (Chrome 146)")

Examples

Example 1 — Dashboard with responsive sidebar

<div class="grid grid-cols-1 md:grid-cols-[fit-content(280px)_1fr] min-h-screen">
  <aside class="hidden md:block border-r p-4">SideNav</aside>
  <main class="p-6">Main</main>
</div>

Example 2 — Responsive card grid with container queries

<div class="@container" style="container-type:inline-size">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- cards -->
  </div>
</div>

Example 3 — Fluid section padding

<section class="px-[clamp(1rem,5vw,4rem)] py-[clamp(2rem,8vw,6rem)]">
  <h2 class="text-4xl">Responsive section</h2>
</section>

Decision tree

• Component needs to adapt to its container? → Container query (@container)
• Page-level layout breakpoint? → Media query (@media)
• Tether UI to an element (tooltip/popover)? → Anchor positioning (CSS position-* anchor properties)
• Dynamic column count? → repeat(auto-fill, minmax(...)) grid
• 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

1. 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).
2. 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).
3. Subgrid browser support — Subgrid support has improved in recent years; still test targets and provide fallback patterns where needed.
4. 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.
5. 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.
6. Touch targets — Minimum 44x44px for touch targets on mobile. Use padding, not just content size, to reach the minimum.
7. 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)