Firefox中CSS Subgrid未正确继承父级网格模板区域的问题咨询

我们最近在做一个简单的网格布局，需求是左侧图片跨两行展示，右侧对应放置标题和文本内容。我们用了subgrid来实现，但遇到了浏览器兼容性的问题，想请大家帮忙看看是哪里出了问题。

我们的代码实现 #

HTML结构

<div class="level-1">
  <div class="level-2">
    <div class="image"></div>
    <h2 class="heading">Lorem</h2>
    <p class="copy">Lorem ipsum</p>
  </div>
</div>

CSS样式

/* Grid and subgrid setup */
.level-1 {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-areas: 
    "image heading" 
    "image copy";

  .level-2 {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 3;
  }
}

/* Grid item placement */
.image { grid-area: image; }
.heading { grid-area: heading; }
.copy { grid-area: copy; }

不同浏览器的表现差异 #

• Chrome中的表现：完全符合预期，图片跨两行占据左侧区域，标题和文本在右侧对应位置正常展示。
• Firefox中的表现：网格区域似乎没有正确继承，布局完全不符合我们通过grid-template-areas定义的结构。

我们尝试的临时修复方案 #

我们试了两种方法让Firefox正常显示，但都觉得有点偏离subgrid的设计初衷：

1. 手动给subgrid内的元素设置grid-row和grid-column的跨度，但这样就失去了用模板区域（grid-template-areas）实现结构化布局的便捷性；
2. 给.level-2添加grid-template-areas: inherit，这样Firefox能正常渲染了，但我们查了W3C规范和MDN文档，都没看到明确提到这种用法，不确定这是合规的标准写法还是临时的hack。

核心疑问 #

想请教大家：这是Firefox的bug吗？还是我们对subgrid结合grid-template-areas的用法理解有误，没有进行正确的配置？

内容来源于stack exchange