frontend-syntax-css-grid-subgrid

name	frontend-syntax-css-grid-subgrid
description	Use when laying out a section that is two-dimensional (rows AND columns matter at the same time), when nested grid items need to align to lines defined on an outer grid, when card titles or meta rows in a card list refuse to line up across columns, when a responsive grid must auto-fit or auto-fill an unknown number of items, when negative margins are being considered to "pull" a child into a parent track, or when a layout needs named lines or named areas that survive refactors. Prevents the classic "nested grid with hand-tuned margins" anti-pattern, the `auto-fill` versus `auto-fit` confusion that collapses or preserves empty tracks unpredictably, declaring subgrid on both axes when implicit rows are still needed, assuming masonry layout is Baseline (it is not), and using the legacy `grid-gap` property name instead of `gap`. Covers `display: grid` and `display: inline-grid`, `grid-template-columns` and `grid-template-rows`, `grid-template-areas` with named areas and dot null cells, named lines with `[name]` brackets, `repeat()` with `auto-fill` and `auto-fit`, `minmax()`, `fit-content()`, the `fr` unit, `gap` and `row-gap` and `column-gap`, implicit tracks with `grid-auto-rows` and `grid-auto-columns`, `grid-auto-flow` with `row` and `column` and `dense`, item placement with `grid-column` and `grid-row` and `grid-area`, alignment with `justify-items` and `align-items` and `place-items` and `justify-self` and `align-self`, and `subgrid` on either or both axes (Baseline Widely since September 2023) with named-line passthrough, gap inheritance, and the no-implicit-tracks hard limitation. Keywords: display grid, inline-grid, grid-template-columns, grid-template-rows, grid-template-areas, subgrid, named lines, named-line passthrough, repeat, minmax, fit-content, auto-fill, auto-fit, fr unit, gap, row-gap, column-gap, grid-auto-rows, grid-auto-columns, grid-auto-flow, dense, place-items, justify-self, align-self, grid-area, card layout aligned baselines, layout breaks at sub-component, items misaligned, gap not working, grid tracks do not align across rows, subgrid not working, implicit rows in subgrid not generated, nested items not aligned to outer grid, how to align nested grid items, what is subgrid, when to use grid vs flexbox, how do I make a card layout with aligned baselines, why is grid-gap not working, when to use auto-fill vs auto-fit, how do named lines work.
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Frontend Syntax CSS Grid + Subgrid

This skill defines the CSS Grid layout surface and the rule for picking Grid versus Flexbox, and for picking subgrid versus a nested grid. CSS Grid is Baseline Widely Available since October 2017; subgrid is Baseline Widely Available since September 2023. The skill builds on [[frontend-core-architecture]] (style layer) and [[frontend-core-web-standards-baseline]] (Baseline gating).

Sources: MDN: CSS grid layout (verified 2026-05-19), MDN: Subgrid (verified 2026-05-19), MDN: grid-template-areas (verified 2026-05-19), W3C: CSS Grid Layout Module Level 2 (verified 2026-05-19).

Quick Reference

Container properties

Property	Purpose	Notes
display: grid	Establishes a grid formatting context	Block-level container.
display: inline-grid	Same, inline-level container	ALWAYS use when the container itself must flow inline. Default display: grid is block.
grid-template-columns	Defines the column tracks of the explicit grid	Accepts lengths, fr, minmax(), repeat(), fit-content(), [name] line names, subgrid.
grid-template-rows	Defines the row tracks of the explicit grid	Same syntax as columns.
grid-template-areas	Defines named areas via row-strings	Areas MUST form a rectangle. Use . (or ...) for empty cells. Auto-generates <name>-start and <name>-end lines on both axes.
gap	Gutter between tracks (works on grid AND flex)	Shorthand for row-gap column-gap. ALWAYS use gap. The legacy alias grid-gap is deprecated.