嵌套 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在子容器内部——这些属性只对直接子项生效，嵌套后作用域变了
示例：
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
<p>.card {
display: grid; /<em> 必须写！否则不是嵌套 Grid </em>/
grid-template-areas:
"img img"
"title title"
"desc desc";
gap: 0.5rem;
}</p><p>.card img { grid-area: img; }
.card h3 { grid-area: title; }
.card p { grid-area: desc; }
嵌套 Grid 中的 track sizing 和对齐容易踩的坑
子 Grid 的 grid-template-columns 默认不继承父容器的列宽，它的 1fr 是相对于自身容器宽度计算的，和父级的 1fr 没有比例关系。这意味着：同一份 CSS 写在不同层级，1fr 含义完全不同。
- 子 Grid 中使用
minmax(0, 1fr)可防止内容撑宽导致换行（尤其配合word-break: break-word） -
align-items和justify-items在子 Grid 上控制其内部项目对齐，不影响父级布局；但父级的align-content对子 Grid 元素本身起作用（比如垂直居中整张卡片） - 不要指望用父级
grid-column: span 2让子 Grid 跨列——那只是让整个子容器占两列，子容器内部结构仍由它自己的 Grid 规则决定
嵌套 Grid 与 flex 替代方案的取舍
不是所有“内部结构”都需要嵌套 Grid。如果子元素只有单行或单列排布，用 display: flex 更轻量、兼容性更好（尤其需支持 Safari 10–12 时）。Grid 嵌套真正有价值的地方是需要二维控制（行列同时约束）且结构稳定。
- Flex 适合：按钮组、导航条、头像+文字一行排列
- 嵌套 Grid 适合：带图标/标签/数值的指标卡片、多栏表单分组、响应式图文混排模块
- 性能上无明显差异，但过度嵌套（三层及以上 Grid）会让调试变困难，Chrome DevTools 的 Grid overlay 只高亮当前选中容器的网格线
真正难处理的是跨层级对齐需求，比如所有卡片里的「标题」要在同一水平线上——这得靠父容器统一控制行高或使用 align-items: start，而不是靠子 Grid 自己调。
