AgentRules.org
RulesStacksClientsAuditorPrunerSelf-HealRFCsBenchmarkCLICI/CDAuthorsSubmit
This specification is maintained by the AgentRules Working Group. Have enhancements or want to claim maintainership?Submit Specification →
frontendmedium PriorityID: css-subgrid-nested-alignment

Modern CSS Grid Subgrid & Form Layout Track Inheritance Standard

Production standard for multi-column form and card alignments using CSS Grid Level 2 Subgrid. Eliminates manual fixed pixel offsets and JavaScript resize observers by allowing nested card items to align directly to the parent grid track definition.

Prohibited Anti-Pattern: AI writes brittle JavaScript resize observers or hardcoded pixel heights to align cards across variable-length headers and buttons in grid layouts.

Export Ready-to-Drop Configuration

Select format below to copy code or download file directly.

---
description: Modern CSS Grid Subgrid & Form Layout Track Inheritance Standard - Production standard for multi-column form and card alignments using CSS Grid Level 2 Subgrid. Eliminates manual fixed pixel offsets and JavaScript resize observers by allowing nested card items to align directly to the parent grid track definition.
globs: **/*.css, **/*.module.css, **/*.tsx
alwaysApply: false
verified_by: "agentrules.org"
license: "CC-BY-4.0"
source: "https://agentrules.org/rules/css-subgrid-nested-alignment"
---

# Modern CSS Grid Subgrid & Form Layout Track Inheritance Standard

> **Severity**: MEDIUM | **Category**: frontend
> **Anti-Pattern Warning**: AI writes brittle JavaScript resize observers or hardcoded pixel heights to align cards across variable-length headers and buttons in grid layouts.

## System Constraints
You are a Modern CSS Architecture Specialist. When aligning card components with variable-height headers, bodies, and footers across responsive columns, DO NOT use JavaScript resize listeners or fixed min-height hacks. Use modern CSS grid-template-rows: subgrid track inheritance.

## Strict Guidelines
- MUST define parent grid rows matching component anatomy: grid-template-rows: auto 1fr auto.
- MUST set grid-row: span 3 and grid-template-rows: subgrid on child cards to lock header, body, and action buttons to shared tracks.
- SHOULD include fallback styling (@supports not (grid-template-rows: subgrid)) for legacy browser environments.
- MUST NOT set fixed pixel heights (height: 450px) on card bodies containing dynamic multilingual text.
- SHOULD use gap inheritance across subgrid children to maintain harmonic rhythm.

## Bad vs Good Implementations
### Harmonic Card Alignment via CSS Subgrid

#### Bad Antipattern (AI Common Hallucination)
> **Why it fails**: Fixed heights cause text truncation or container overflow in localized languages, while flexbox columns cannot coordinate row baselines across sibling cards without complex JavaScript listeners.
```css
/* FATAL: Brittle fixed height hacks and flex alignment mismatches */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  width: 300px;
  height: 480px; /* Text overflows on mobile or localized languages! */
  display: flex;
  flex-direction: column;
}
```

#### Production Standard (Correct)
> **Standard**: Uses CSS subgrid to inherit the parent's row tracks directly into the card component. Headers, descriptions, and action buttons align horizontally across columns regardless of dynamic content length.
```css
/* Modern CSS Grid with Subgrid row track inheritance */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: auto 1fr auto;
  gap: 1.5rem;
}

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.card-header { /* Locks across all cards on row */ }
.card-body { /* Expands to fill identical remaining vertical height */ }
.card-footer { /* Bottom buttons align horizontally across columns */ }
```
Recommended MCP Servers (mcp-serverlist.com)

Equip agent with system tools to verify code for this stack.

CSS Grid & Subgrid Inspector MCP
Validates CSS grid track declarations and verifies browser baseline compatibility.
Recommended Agent Skills (askills.dev)

Ready-to-use executable skill functions tailored to this stack.

askills: CSS Subgrid Layout Builder
Constructs robust multi-card grid layouts with subgrid track inheritance and fallbacks.
Architectural Specification & Invariant Rationale

Architectural Invariant Design: Modern CSS Grid Subgrid & Form Layout Track Inheritance Standard

Modern CSS Grid Subgrid & Form Layout Track Inheritance Standard defines an industrial-grade behavioral standard for frontend engineering. Production standard for multi-column form and card alignments using CSS Grid Level 2 Subgrid. Eliminates manual fixed pixel offsets and JavaScript resize observers by allowing nested card items to align directly to the parent grid track definition. Modern software architectures require strict adherence to deterministic patterns to guarantee high availability, maintainability, and zero security vulnerabilities.

Framework Paradigm Shift & Drift MechanicsLLMs are trained on millions of open-source repositories containing outdated code, legacy idioms, and unpatched antipatterns. When coding assistants generate implementations for this stack, they default to common statistical tokens: AI writes brittle JavaScript resize observers or hardcoded pixel heights to align cards across variable-length headers and buttons in grid layouts. Without an explicit system instruction file, developers spend hours debugging silent failures.
Failure Modes & Production Blast Radius

Hazard Analysis: What Breaks Without This Rule

The following failure modes have been cataloged from hundreds of hours of production code reviews where AI assistants produced non-compliant implementations:

Failure ModeAI Symptom (The Anti-Pattern)SeverityProduction Impact & Remedy
AI Hallucination & Deprecation DriftAI writes brittle JavaScript resize observers or hardcoded pixel heights to align cards across variable-length headers and buttons in grid layouts.High
Violating this industrial standard introduces regression bugs, security risks, and unexpected runtime failures in production.
Enforce explicit behavioral system directives across all AI coding assistants in your repository.
Silent Architecture InconsistencyAI assistants produce mixed paradigms across files, creating fragmented codebase conventions.Medium
Increases cognitive load during code reviews and leads to maintenance debt across engineering teams.
Pin project conventions in .cursor/rules, CLAUDE.md, and AGENTS.md so all team agents follow identical guardrails.
Architectural Directives in Detail

Step-by-Step Production Directives

Each rule constraint below is injected into the AI agent's system prompt to establish deterministic boundaries:

1

MUST define parent grid rows matching component anatomy

MUST define parent grid rows matching component anatomy: grid-template-rows: auto 1fr auto.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
2

MUST set grid-row

MUST set grid-row: span 3 and grid-template-rows: subgrid on child cards to lock header, body, and action buttons to shared tracks.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
3

SHOULD include fallback styling (@supports not (grid-template-rows

SHOULD include fallback styling (@supports not (grid-template-rows: subgrid)) for legacy browser environments.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
4

MUST NOT set fixed pixel heights (height

MUST NOT set fixed pixel heights (height: 450px) on card bodies containing dynamic multilingual text.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
5

SHOULD use gap inheritance across subgrid children to maintain harmonic rhythm.

SHOULD use gap inheritance across subgrid children to maintain harmonic rhythm.

Rationale:AI models frequently generate unconstrained code here because statistical language distributions lack project-specific architectural context. Mandating this directive ensures that generated code adheres to verified industrial production requirements.
Enforcement:Integrated into the Agent Pack rule file. When Cursor, Claude Code, or Codex processes this prompt, it applies this constraint before emitting syntax.
Technical Questions & Answers

Frequently Asked Technical Questions

Common questions developers face when configuring AI coding assistants for this stack:

Q:Why is Modern CSS Grid Subgrid & Form Layout Track Inheritance Standard critical for AI coding assistants?

Production standard for multi-column form and card alignments using CSS Grid Level 2 Subgrid. Eliminates manual fixed pixel offsets and JavaScript resize observers by allowing nested card items to align directly to the parent grid track definition. Without explicit behavioral boundaries, AI coding assistants (Cursor, Claude Code, Windsurf, Codex) rely on training data averages, which frequently produce deprecated, inefficient, or vulnerable code patterns.

Q:How does adopting this rule prevent AI hallucinations?

This rule explicitly declares what the AI must avoid (AI writes brittle JavaScript resize observers or hardcoded pixel heights to align cards across variable-length headers and buttons in grid layouts.) and prescribes verified positive examples. Grounding the LLM with negative and positive pairs eliminates guesswork.

Q:Which AI coding environments are supported?

This specification is multi-platform compatible: Cursor (.cursor/rules/*.mdc & .cursorrules), Anthropic Claude Code (CLAUDE.md), Windsurf (.windsurfrules), Codex / Cline (AGENTS.md), and GitHub Copilot (.github/copilot-instructions.md).

Q:Can I combine this rule with other technology stacks?

Yes. Use the Interactive Stack Builder or download an Agent Pack to merge this rule with other frontend, backend, database, security, and DevOps rules without syntax collision.

Open Specification · CC BY 4.0·Free for Personal, Team & Commercial In-Repo Use

Citation & Open Source Attribution Guidelines

This specification is licensed under Creative Commons Attribution 4.0 International (CC BY 4.0). You are completely free to adapt and share this rule in your workspace. If citing, including in public AI benchmark datasets, or redistributing, attribution to AgentRules.org is required.

Related FRONTEND Rules

View all rules →
frontend
119

SolidStart 1.0 Server Functions & Async Boundaries Production Standard

SolidStart 1.0 relies on the Vinxi bundler to split `server$` closures into independent HTTP POST RPC endpoints. Direct lexical closure over client signals within `server$` scopes or failure to demarcate async boundaries with `<Suspense>` causes silent serialization failures, client-bundle secret leaks, and SSR hydration mismatches. Enforcing strict parameter passing, runtime input validation, and Solid async primitives maintains security and fine-grained reactivity across network boundaries.

frontend
119

Astro 5 Actions & Content Layer Production Standard

Enforces strict type safety and architectural correctness for Astro 5 Server Actions and the zero-waterfall Content Layer API. Prevents runtime contract mismatches, hydration mismatches, and unhandled mutation exceptions across dynamic and prerendered boundaries. Failure to follow these patterns leads to silent data fetching waterfalls, build-time cache corruptions, and unhandled server action exceptions.

frontend
51

Nuxt 4 Nitro Server Engine & Shared Directory Production Standard

Nuxt 4 enforces strict boundary segregation between client UI in the app/ directory, backend endpoints in server/, and universal contracts in shared/. Violating cross-boundary isolation or maintaining module-scoped state in Nitro server handlers causes catastrophic cross-request data corruption and hydration mismatches under concurrent production traffic. Architects must enforce request-isolated H3 event contexts, universal serialization schemas, and strict path-alias boundaries.

1 Rule in Stack

Modern