CSS Grid 是按需组合的工具集，硬背语法无益；grid-template-areas 需引号包裹、行列数一致、区域名合规；justify-content 对齐网格轨道整体，justify-items 对齐网格项内容；dense 模式损害可访问性；subgrid 因支持有限和维护成本高而难落地。
没有“完整知识图谱”这回事——CSS Grid 是按需组合的工具集，硬背 100 个要点反而让你写不出可用的布局。
grid-template-areas 怎么写才不报错
常见错误是区域名拼错、行数列数不匹配，或用了空格但没用引号包住整行。浏览器会直接忽略整条声明，且不报错，只回退到默认流布局，非常难排查。
- 每行必须用单引号或双引号包裹，
"header header sidebar"合法，header header sidebar非法 - 所有行的单词数量必须一致，
"a b" "c"会失效（第二行只有 1 列） - 区域名不能含短横线（
-）、数字开头、或和none/auto等关键字冲突 - 未在
grid-template-areas中声明的元素，仍会参与网格，但位置由grid-row/grid-column决定，别指望它自动填空
justify-content 和 justify-items 容易混淆的边界
两者都管“水平对齐”，但作用对象完全不同：justify-content 对齐的是整个网格容器内的**网格轨道整体**，justify-items 对齐的是每个**网格项的内容框**（即 item 自身的 width/height 范围内）。
- 当
grid-template-columns: 100px 1fr 200px，容器宽度远大于总列宽时，justify-content: center会让三列整体居中；justify-items: center让每个格子内部的子元素（比如文字、图片）水平居中 -
justify-items在 flex 布局里没有对应物，它是 Grid 特有的“单元格级对齐”能力 - 若某 item 设置了
justify-self: start，它会覆盖justify-items的设置，但不会影响其他 item
grid-auto-flow: dense 导致重排不可控
启用 dense 后，Grid 会主动把小尺寸 item 填进前面留下的空洞，看起来更紧凑，但顺序完全脱离源码 DOM 顺序——对可访问性（screen reader）、键盘导航、SEO 都是隐形雷。
- 仅在纯视觉卡片墙、仪表盘等无语义顺序要求的场景下考虑使用
-
dense不会影响grid-row/grid-column显式指定的位置，只影响自动分配的 item - 与
grid-template-rows固定行高混用时，dense 可能导致内容被裁剪（因为强行塞进已有行），建议搭配minmax(0, 1fr)或min-content更安全
subgrid 在实际项目里为什么几乎用不上
subgrid 允许子网格复用父网格的轨道线，听起来很美，但目前（Chrome 117+、Firefox 119+）支持有限，且有一个致命限制：父容器必须用 display: grid，子容器用 display: subgrid，而子容器的子元素又得重新定义 grid-column —— 这等于把布局逻辑从父层撕开，分散到多层 DOM 中，维护成本陡增。
- 目前仅适用于高度受控的组件封装场景（如自定义表单控件组），普通页面布局没必要引入
- 不支持嵌套 subgrid（子 subgrid 无法再继承父父级轨道）
- React/Vue 等框架中，如果父组件透传 grid 线定义给子组件，很容易因 key 变化或条件渲染导致轨道错位，调试极其困难
真正卡住人的从来不是语法记不全，而是搞不清某个属性是在“调度轨道”还是“定位内容”，是在“控制容器”还是“控制项目”。多打开 DevTools 的 Layout 面板，把 grid-template-areas 和 grid-line 数字标出来看两分钟，比背十遍规范管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
