具有深度嵌套子网格的浏览器之间的行为不一致

Question

当我将子网格嵌套在网格内的填充子网格内时，不同浏览器之间的行为不一致。

Chrome/Edge (Windows)	火狐（Windows）	Safari MacOS

这是代码：

.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;
}

<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>

哪一种是规范所预期的正确行为？我希望它是 Chrome 的行为。

Answer 1

首先，渲染 CSS 的浏览器之间存在大量不一致之处，而不仅仅是子网格，因为子网格仍然相对较新。

两个，我看不到你的浏览器图像示例，所以我做了一个测试。

https://jsfiddle.net/Ltp4m7fw/

第三，我对子网格还不太熟悉，所以可能有更好的方法。不过，我通过覆盖 CSS 中的几个网格元素，使其在 Chrome 和 Firefox (Windows) 中看起来相同。

也许问题不是在内部项目上声明宽度？有些浏览器对此很挑剔。我使用 calc 和 margin 来模仿“填充内容”的布局。

不太确定您想要实现什么目标，但希望这能让事情顺利进行。

/* Begin Edits */
div.grid, div.setgap.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
div.setgap.subgrid {
  gap: initial;
  row-gap: 1rem;
  column-gap: 1rem;
}
div.subgrid.pad > span {
  background-color: aqua;
}
div.subgrid > span {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 4;
  width: 100%;
  background-color: violet;
}
div.col1_2 {
  grid-column: 1;
}
div.col3 {
  grid-column: 2;
}
.pad {
  padding: 2.5rem !important;
}
.subgrid:not(.pad) .setgap.subgrid {
  column-gap: initial;
}
.subgrid:not(.pad) .setgap.subgrid .col1_2 {
  width: calc(100% - 5rem);
  margin: 0 auto 0 2.5rem;
}
.subgrid:not(.pad) .setgap.subgrid .col3 {
  width: calc(100% - 5rem);
  margin: 0 2.5rem 0 auto;
}
/* End Edits */

.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;
}