What are the core concepts covered in CSS Subgrid & Anchor Positioning API?

How `grid-template-rows: subgrid` allows nested children to participate in parent track sizing; Tethering floating dialogs, menus, and tooltips using `position-anchor: --my-anchor`; Calculating dynamic offsets with the `anchor()` function (e.g. `top: anchor(bottom)`); Automatic collision detection and positioning fallbacks with `@position-try`

Advanced 24 min readModule: Module 14: Subgrid, Anchor Positioning API & Advanced Multi-Axis Layout

CSS Subgrid & Anchor Positioning API

Eliminate floating layout bugs using CSS Subgrid for nested alignment and the modern CSS Anchor Positioning API (`anchor()`, `position-anchor`) for tethered tooltips and popovers.

What You Will Learn in This Lesson

How `grid-template-rows: subgrid` allows nested children to participate in parent track sizing
Tethering floating dialogs, menus, and tooltips using `position-anchor: --my-anchor`
Calculating dynamic offsets with the `anchor()` function (e.g. `top: anchor(bottom)`)
Automatic collision detection and positioning fallbacks with `@position-try`

Introduction & Core Concept

Historically, nested card components inside CSS Grid could not align their internal headers and footers with neighboring cards because each child established an independent layout context. CSS Subgrid solves this by letting nested elements snap directly to parent tracks. Additionally, the new CSS Anchor Positioning API eliminates third-party libraries (like Popper.js or Floating UI) by tethering floating popovers to anchor elements purely in CSS.

WHY DOES THIS MATTER IN THE REAL WORLD?

Misaligned card buttons and overflowing dropdown menus have plagued web design for decades. Subgrid and Anchor Positioning deliver pixel-perfect cross-component alignment with zero JavaScript overhead.

Syntax & Structure

css

grid-template-rows: subgrid;
position: absolute;
position-anchor: --menu-btn;
top: anchor(bottom);
left: anchor(left);

Subgrid Alignment and Anchor Positioning Tooltip

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* 1. CSS Subgrid Card Grid Layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: auto 1fr auto; /* Row 1: Header, Row 2: Body, Row 3: Actions */
  gap: 24px;
}
 
.card-item {
  display: grid;
  grid-row: span 3; /* Spans 3 parent rows */
  grid-template-rows: subgrid; /* Snaps internal elements to parent rows! */
  padding: 20px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
 
/* 2. Anchor Positioning API: Tooltip Tethered to Anchor Button */
.anchor-trigger-btn {
  anchor-name: --docs-info-btn;
}
 
.tethered-tooltip {
  position: absolute;
  position-anchor: --docs-info-btn;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%) translateY(8px);
  padding: 8px 14px;
  border-radius: 6px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position-try-fallbacks: --flip-above;
}
 
@position-try --flip-above {
  bottom: anchor(top);
  top: unset;
}

Line-by-Line Technical Breakdown

1Collision Detection with `@position-try`: When using `position-try-fallbacks`, the browser calculates if the popover overflows the viewport. If overflow occurs, the browser automatically applies the fallback rule (e.g. flipping top/bottom or aligning to right) without JavaScript window resize listeners.

Try It Yourself (Interactive Editor)

Modify the code in real-time and click Run to test live browser output and console logs.

Intelligent Code Runner & Live Sandbox[CSS]

CSS SOURCE EDITOR

Interactive Live Code

/* 1. CSS Subgrid Card Grid Layout */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: auto 1fr auto; /* Row 1: Header, Row 2: Body, Row 3: Actions */
  gap: 24px;
}

.card-item {
  display: grid;
  grid-row: span 3; /* Spans 3 parent rows */
  grid-template-rows: subgrid; /* Snaps internal elements to parent rows! */
  padding: 20px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

/* 2. Anchor Positioning API: Tooltip Tethered to Anchor Button */
.anchor-trigger-btn {
  anchor-name: --docs-info-btn;
}

.tethered-tooltip {
  position: absolute;
  position-anchor: --docs-info-btn;
  top: anchor(bottom);
  left: anchor(center);
  transform: translateX(-50%) translateY(8px);
  padding: 8px 14px;
  border-radius: 6px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position-try-fallbacks: --flip-above;
}

@position-try --flip-above {
  bottom: anchor(top);
  top: unset;
}

Common Mistakes & How to Avoid Them

#1: Forgetting to specify `grid-row: span N` when activating `grid-template-rows: subgrid` on a child element.

Subgrid requires knowing how many parent tracks the subgrid child spans.

Incorrect / Antipattern

.child { grid-template-rows: subgrid; }

Correct / Professional Solution

.child { grid-row: span 3; grid-template-rows: subgrid; }

Industry Best Practices & Professional Standards

Use Subgrid for multi-card catalogs to ensure uniform title heights and bottom-aligned action buttons.
Use CSS Anchor Positioning for tooltips, custom select menus, and floating popovers.
Always include `@position-try` fallbacks to handle edge-of-screen viewport boundaries.

Lesson Summary & Core Takeaways

Subgrid aligns nested elements to parent grid tracks across sibling components.
Anchor Positioning binds floating elements to target anchors in pure CSS.
`@position-try` provides automated, zero-JS viewport collision resolution.