深度嵌套subgrid在不同浏览器中的行为不一致问题咨询

当在Grid容器内的带内边距Subgrid中嵌套Subgrid时，不同浏览器出现了行为不一致的情况，以下是各浏览器的显示效果对比：

Chrome/Edge (Windows)	Firefox (Windows)	Safari MacOS

对应的代码实现 #

CSS代码

.grid {
  display: grid;
  grid-template-columns: [fullwidth-start] 100px [col1-start] 1fr [col1-end col2-start] 1fr [col2-end col3-start] 1fr [col3-end] 100px [fullwidth-end];
}
.grid .subgrid {
  display: grid;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.pad {
  padding-inline: 200px;
}

.setgap {
  padding-block: 1em;
  background-color: #def;
  display: grid;
  gap: 1em;
  grid-column: fullwidth;
  grid-template-columns: subgrid;
}

.col1_2 {
  background-color: #edf;
  padding: 1em;
  grid-column: col1-start/span 2;
}

.col3 {
  padding: 1em;
  background-color: #fde;
  grid-column: col3;
}

HTML代码

<div class="grid">
  <div class="subgrid pad">
    Padded content<br><br>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>


<div class="grid">
  <div class="subgrid">
    Non-padded content<br><br>
    <div class="setgap subgrid">
      <div class="col1_2">
        <h2>1-2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit doloremque, quae qui excepturi saepe blanditiis eveniet minus incidunt asperiores obcaecati repellat tempora doloribus inventore iure labore, neque soluta at ipsa?</p>
      </div>
      <div class="col3">
        <h3>3</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsa quas a cumque et impedit accusantium maxime, quis delectus molestiae, alias eveniet.</p>
      </div>
    </div> 
  </div>
</div>

规范解析与正确行为判断 #

根据CSS Grid Level 2规范，Subgrid的轨道定义是继承自它作为Grid项所在的外层Grid容器，而非直接父级Subgrid的内容区域。

在你的代码中，嵌套的.setgap.subgrid作为Grid项，它所在的Grid容器是最外层的.grid，而非带内边距的.pad.subgrid。因此，嵌套Subgrid应该对齐最外层.grid定义的轨道（包括fullwidth、col1-start等线），不受父级Subgrid内边距的影响。

Chrome/Edge的表现符合这一规范：嵌套Subgrid的内容仍然对齐最外层Grid的原始轨道，父级Subgrid的内边距仅作用于自身的内容区域，不会改变嵌套Subgrid的轨道对齐基准。而Firefox和Safari的处理方式错误地将父级Subgrid的内边距纳入了嵌套Subgrid的轨道计算，导致对齐偏移。

所以，Chrome/Edge的行为是符合规范的正确表现。

内容的提问来源于stack exchange，提问作者yunzen