display: subgrid

• 从CSS Grid Level 2 draft spec：*
  2.网格容器

子网格提供了通过嵌套元素向下传递网格参数的能力，并将基于内容的大小信息向上返回到其父网格。
如果元素是网格项（即它是流入的，其父是网格容器），display: subgrid使元素成为子网格（这是一种特殊类型的网格容器盒），因此忽略它的grid-template-*和grid-*-gap属性，以有利于采用它跨越的父网格轨道。

3.子网格

一个网格项本身可以是一个网格容器，只要赋予它display: grid。在这种情况下，其内容的布局将独立于其参与的网格的布局。
在某些情况下，可能需要多个网格项的内容彼此对齐。本身就是网格项的网格容器可以使用display: subgrid将其行和列的定义推迟到其父网格容器，使其成为子网格。
在这种情况下，子网格的网格项参与调整父网格容器的网格大小，从而允许两个网格的内容对齐。阅读更多。
此功能尚未在主要浏览器中实现。谁知道会是什么时候。
在Grid中，只有容器的流入子级成为网格项，并且可以接受网格属性。
对于网格项上的display: subgrid，项的子项尊重容器的行。
根据Grid Level 1规范，display: subgrid已被推迟到Level 2。
目前，网格项（即嵌套网格容器）上的display: grid在某些情况下可能很有用。
另一个可能的解决方法是display: contents。该方法解释如下：

• What is an alternative to css subgrid?

更多信息：

• https://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/
• https://bugzilla.mozilla.org/show_bug.cgi?id=1240834

由于subgrids根本不受支持，在撰写此答案时，在最新的 Firefox v71 以外的浏览器上，即使其他浏览器开始支持它，仍然，使用旧版本的用户将被抛在后面至少一年，直到足够的用户升级他们的浏览器才能使用这样的新功能。

我设计了一种在祖先网格上对齐深度嵌套网格元素的方法：

本质上，这个解决方案是将display:contents应用于网格的所有嵌套元素，直到希望用作网格项的元素，这有效地实现了反向继承，因此每个使用display:contents设置的元素实际上都是投影其子元素的显示，因此最终深度嵌套的元素被视为.container元素的直接子元素。

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  max-width: 500px;
  margin: auto;
}

.container div{
  display: contents; /* <-- makes the div elements "transparent" to the grid */
}

input{ height: 40px; }
label{ align-self: center; }

<div class="container">
  <div>
    <div>
      <div>
        <label contenteditable>very long label</label>
        <input>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <label contenteditable>short</label>
        <input>
      </div>
    </div>
  </div>
</div>

浏览器将其视为：

<div class="container">
  <label contenteditable>very long label</label>
  <input>
  <label contenteditable>short</label>
  <input>
</div>

在上面的示例中，标签是可编辑的，以显示网格轨迹的动态特性，因此所有网格项都对齐。
∮ ∮ ∮ ∮