嵌套 Grid 是在 grid item 内部显式声明 display: grid，形成独立于父容器的二维布局上下文；适用于卡片、仪表盘 widget、多行列表单等需内部行列对齐的场景。
嵌套 Grid 是什么，什么时候该用
嵌套 Grid 指的是在某个 Grid 容器的子元素（即 grid item）内部，再次声明 display: grid，让它自身也成为一个独立的 Grid 容器。它不是“Grid 里套 Grid”的语法糖，而是两个层级完全独立的布局上下文——父容器控制子项的位置，子容器控制自己内部的子项位置。
适合用嵌套 Grid 的典型场景包括：卡片列表中每张卡片内部有标题/图片/描述等固定结构；仪表盘中每个 widget 需要独立对齐；表单区域按组划分但每组内字段又有行列对齐需求。
如何正确启用嵌套 Grid
关键点在于「两层 display 声明必须都显式写出」。父容器设 display: grid 不会自动让子元素变成 Grid 容器，必须手动给子元素加 display: grid 或 display: inline-grid。
- 父容器设置
grid-template-columns和grid-gap控制卡片排列 - 卡片元素（如
.card）需单独设置display: grid，再定义自己的grid-template-areas或grid-template-columns - 避免误用
grid-column/grid-row在子容器内部——这些属性只对直接子项生效，嵌套后作用域变了
示例：
立即学习“前端免费学习笔记（深入）”；
