先记住这个答案
可以把多个项目放到同一个命名区域。grid-template-areas 在容器上定义矩形区域，grid-area 只是让项目引用这块位置，并没有“一块区域只能给一个项目”的限制。两个项目都引用 hero 时，它们在同一片网格区域上重叠。适合做图片上的文字、角标或半透明遮罩，但不要以为 Grid 会替你处理层级和点击关系。
- 命名区域可供多个项目引用
- 同一区域的项目会重叠
- 重叠元素仍占各自的网格位置
- 可用
z-index明确层级
同名区域为什么会重叠
浏览器先从区域图中找到 hero 的上下左右边界，再分别定位每个引用它的网格项目。两个项目拿到同一组边界，视觉上自然叠在一起。项目自身的 justify-self、align-self 仍可调整它在区域内部的位置，因此文字可以靠左下，按钮可以靠右上，不必另外使用绝对定位。
.hero {
display: grid;
grid-template-areas: "hero";
}
.hero img, .hero h2 { grid-area: hero; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero h2 { z-index: 1; align-self: end; }
/* 两个项目共处 hero 区域，标题显示在图片上 */这段样式还需要合适的 HTML 结构和区域高度。标题的 z-index 在网格项目上可参与层叠，能清楚表达它要盖住图片。若有遮罩，可再加一个同区域项目，并明确它是否接收指针事件；否则透明遮罩可能挡住下方按钮。
与区域字符串的重复名称区分
grid-template-areas 里同一个名称可在多个相邻格子出现，用来组成一个矩形区域；那是在定义区域的形状。多个项目都写同一个 grid-area，则是在引用已存在的区域。两种“重复”发生在不同层级，效果也不同。
区域图中的同名格子必须组成连续矩形，不能在两端各写一个 hero，中间隔着别的区域来定义不连续形状。若想让两个内容块分别摆放，不要复用同一名称，而应定义 hero-image 和 hero-text 等独立区域。
例如图片和标题都写 grid-area: hero，它们共享同一个矩形区域，适合做封面叠字；但叠放后谁盖住谁还要看绘制顺序或 z-index。与之不同，在 grid-template-areas 字符串里重复 hero，是在描述一个由多个格子组成的单一区域；它必须连成矩形，不能画成两个分离的小岛。两个层面的“重复名称”不要混为一谈。
容易答错的地方
- 以为后一个项目会自动排到下一行
- 两者都明确指定了相同区域，自动放置不会把第二个项目挪走；它们会叠放。
- 用层级掩盖不可访问的交互
- 遮罩和按钮共处一格时，视觉层级与点击命中都要检查。把按钮盖住或让装饰元素截获点击，页面就会出现看得见却点不到的控件。
面试官还会怎么问？
不写 z-index 时谁显示在上面？
通常后绘制的网格项目会盖住先绘制的部分；复杂样式下应明确层级，不依赖偶然的 DOM 排列。
多个项目能共享一个普通网格单元吗？
能。直接给它们相同的行列边界线，也会重叠；命名区域只是更易读的写法。
共用区域会改变 DOM 顺序吗？
不会。Grid 的视觉摆放不改文档结构，读屏和键盘顺序仍按 DOM 处理。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。