Use CSS subgrid to align nested grid items to parent tracks
SkillDev toolsSubgrid is a skill for reviewing card grid layouts where titles, content areas, or footers don't align across cards. It teaches an agent to spot misaligned nested grids and rewrite them using CSS subgrid, so child items inherit parent grid tracks without JavaScript height matching or fixed-height hacks.
Available today. Use it from your connected AI after setup.
No other account needed.
Have the stylesheet or component code containing the card grid or nested grid layout available.
Then ask your AI: use the Use CSS subgrid to align nested grid items to parent tracks skill
What your AI can do with it
- Detects card grids where titles, body text, or footers misalign across cards
- Converts card grids to use grid-template-rows with subgrid on child cards
- Flags JavaScript height matching, fixed heights, and display: contents workarounds
- Shows the subgrid equivalent for each flagged layout
- Explains how subgrid differs from a nested grid and when to use it on rows versus columns
Getting started
- Have the stylesheet or component code containing the card grid or nested grid layout available.
- Add the subgrid skill to the agent's available skills.
- Ask the agent to review the CSS for misaligned card content areas or alignment workarounds.
- Apply the suggested subgrid changes, setting grid-template-rows on the parent and grid-row: span N with grid-template-rows: subgrid on each card.
- Consult references/rule.md within the skill for full implementation details and code examples.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/subgrid/SKILL.md and read by ahel’s review.
Card grids are one of the most common UI patterns, but aligning content across cards — matching title heights, content areas, and footers — has historically required JavaScript height measurement or CSS hacks. Subgrid solves this at the layout engine level: nested items participate directly in the parent grid's tracks, so alignment is automatic, performant, and CSS-only.
Quick Reference
- subgrid lets a nested grid inherit its parent grid tracks instead of creating new ones
- Solves misaligned card titles, content, and footers across rows of cards
- No JavaScript height matching needed — the browser handles track alignment
- Universal support: Safari 16+, Chrome/Edge 117+, Firefox 71+
Check
Look for card grid layouts in this CSS where card content areas (titles, body text, footers) might not align across cards of different content lengths. These are candidates for subgrid.
Fix
Convert this card grid to use subgrid. Show how to set grid-template-rows on the parent grid, then apply grid-row: span N and grid-template-rows: subgrid on each card to inherit the parent tracks.
Explain
Explain how CSS subgrid works, how it differs from a nested grid, what problem it solves with card alignment, and when to use subgrid on columns versus rows.
Code Review
Review card grid and nested grid layouts in this stylesheet. Flag any layout that uses JavaScript height matching, fixed heights, or display: contents workarounds to achieve cross-card alignment — and show the subgrid equivalent.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/css/subgrid
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- What browsers support subgrid?
- Safari 16+, Chrome and Edge 117+, and Firefox 71+ support it.
- Do I still need JavaScript to align cards?
- No. Subgrid handles track alignment at the layout engine level, so JavaScript height matching is no longer needed.
- How is subgrid different from a nested grid?
- A nested grid creates its own tracks. With subgrid, the nested grid inherits the parent grid's tracks, so items align with sibling cards automatically.
Advanced
- Item type
- skill
- Key
subgrid- Source
- github.com/thedaviddias/front-end-checklist