必须显式定义命名区域并让图片和文字都设相同grid-area值，否则仅位置重合不构成同一区域；需配合position和z-index控制层叠，且响应式下须重写grid-template-areas以避免布局崩坏。
grid-area 怎么让图片和文字落在同一个格子里
必须显式定义命名区域，且所有要重叠的元素都得用 grid-area 指向同一个名字。光靠 grid-column / grid-row 交叉是不够的——那只是位置重合，不是“同一区域”的语义绑定。
常见错误是只给图片设 grid-area: "hero"，却忘了给标题也写上一样的值，结果标题跑默认网格流里去了，压根没进那个格子。
- 先在容器上用
grid-template-areas定义区域名，比如"hero hero" "hero hero" - 图片和标题都要加
grid-area: "hero"，缺一不可 - 别用
grid-area: 1 / 1 / 2 / 2这种坐标写法替代命名区——它不触发区域复用逻辑，两个元素仍算不同单元格
重叠后文字被图片盖住怎么办
Grid 本身不控制层叠顺序，z-index 才管这个。但前提是：两个元素得是定位上下文中的「堆叠上下文」成员，而默认 grid 子项不是。
所以不能只写 z-index: 1 就完事，得先让它们变成定位元素。
立即学习“前端免费学习笔记（深入）”；
- 给文字加
position: relative（或absolute），再配z-index: 2 - 图片保持默认静态定位，或也加
position: relative+z-index: 1显式控制层级 - 如果用了
position: absolute，注意它会脱离网格轨道尺寸，需手动设宽高或用inset: 0填满父格
grid-area 命名区兼容性要注意什么
grid-template-areas 和 grid-area 命名用法在 IE 完全不支持，Edge 16+、Chrome 57+、Firefox 52+ 才稳定可用。如果项目还要兼容老版本，就得换方案。
不是所有“看起来像重叠”的场景都非用命名区不可——比如纯装饰性文字浮在图上，用绝对定位+父容器 position: relative 更轻量、兼容性更好。
- 查 Can I Use 时重点看
grid-template-areas一行，别只看 “CSS Grid” 大类 - Flexbox 无法模拟命名区语义，
flex容器里没有grid-area这个属性 - 如果用 PostCSS autoprefixer，它不会补全命名区语法，这部分得自己兜底
响应式下重叠布局容易崩在哪
命名区域一旦定义，就锁死了行列结构。小屏时如果还强行维持 "hero hero" "hero hero"，会导致文字被压缩变形，或者图片拉伸失真。
真正可控的做法是：在断点里重写整个 grid-template-areas，让小屏变成单列堆叠，大屏才开启重叠。
- 别试图用
grid-column: span 2动态合并——它不等于命名区复用，文字依然在独立轨道里 - 媒体查询里改
grid-template-areas时，记得同步检查所有grid-area值是否还在新模板中存在 - 用
display: contents想绕过区域限制？不行，它会让元素退出网格格式化上下文，grid-area失效
命名区本质是声明式布局契约，不是视觉叠加开关。一旦漏掉某个元素的 grid-area 赋值，或者断点里模板没对齐，重叠就立刻失效——这种问题往往不报错，只静默退回到默认网格流。
