CSS Subgrid
debt(d7/e3/b3/t7)
Closest to 'only careful code review or runtime testing' (d7). Stylelint is listed but automated detection is explicitly 'no' — the pattern of misaligned cards or independently defined inner grids requires visual inspection or careful code review to identify. No automated tool reliably catches the difference between intentional nested grid and mistaken non-use of subgrid.
Closest to 'simple parameterised fix' (e3). The quick_fix shows adding grid-template-columns: subgrid is a small change, but common_mistakes reveal the child also needs proper span and correct axis selection — typically a few-line fix within one component's CSS, not a one-liner but not cross-cutting either.
Closest to 'localised tax' (b3). Subgrid applies only to web contexts and affects specific layout components (cards, forms). The choice is contained to individual component styling — it doesn't shape the entire system architecture, but misuse creates visual inconsistency that persists until fixed.
Closest to 'serious trap' (t7). The misconception explicitly states 'Subgrid is just nested grid' — this contradicts how regular nested grid works in CSS. A developer familiar with CSS Grid will assume nested grid handles alignment, but subgrid behaves fundamentally differently by inheriting parent tracks. The trap is compounded by needing proper span setup and browser support considerations.
Also Known As
TL;DR
Explanation
CSS Grid's subgrid (CSS Grid Level 2) solves the problem of aligning nested content to a parent grid. Without subgrid: each card in a grid has its own internal grid, so card titles and descriptions don't align across cards. With subgrid: child elements adopt the parent's grid tracks. Syntax: .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; } — the card's rows now follow the parent grid's track sizes. Supported in all modern browsers since 2023. Particularly useful for: card layouts, form rows with labels, and any repeating component that needs cross-card alignment.
Common Misconception
Why It Matters
Common Mistakes
- subgrid without span — the child must span multiple parent tracks for subgrid to have an effect.
- Using subgrid when align-items: start achieves the same — subgrid is for alignment across siblings, not within one.
- Not checking browser support — subgrid requires Chrome 117+, Firefox 71+, Safari 16+.
- Subgrid on both axes when only one needs alignment — adds unnecessary complexity.
Code Examples
/* Cards with independent grids — misaligned across row:
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.card { display: grid; } /* Independent tracks — titles misalign */
/* Card 1: title 1 line, Card 2: title 3 lines → descriptions don't align *//* Parent grid defines 3 tracks per card: title, description, button */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(auto-fill, auto auto auto);
}
/* Card spans 3 rows and uses parent's tracks: */
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* Inherits parent's row sizes */
}
/* All card titles, descriptions, and buttons now align perfectly */