css - 是否有 "subgrid"功能，用于定位网格容器的 "grandchildren"？

Question

所有关于 CSS 网格的指南似乎都暗示了一种结构，其中位于网格中的元素是网格元素本身的直接子元素:

<div class="wrapper">
  <div>A</div>
  <div>B</div>
</div>

其中 .wrapper 具有 display: grid 和 grid 属性的定义。

如果我想将作为网格“孙子”的元素放置在网格本身(而不是依赖其父元素)上，这是否有意义？

<div class="wrapper">
  <div>A</div>
  <div>
    <div>B</div>
    <div>C</div>
  </div>
</div>

我想将 A、B 和 C 分别放在各自的网格行上；这甚至有意义吗？

Answer 1

显示:子网格

来自 CSS Grid Level 2 draft spec :

2. Grid Containers

Subgrids provide the ability to pass grid parameters down through nested elements, and content-based sizing information back up to their parent grid.

If the element is a grid item (i.e. it is in-flow and its parent is a grid container), display: subgrid makes the element a subgrid (which is a special type of grid container box) and consequently ignores its grid-template-* and grid-*-gap properties in favor of adopting the parent grid tracks that it spans.

3. Subgrids

A grid item can itself be a grid container by giving it display: grid. In this case the layout of its contents will be independent of the layout of the grid it participates in.

In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container by using display: subgrid, making it a subgrid.

In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align. Read more.

此功能尚未在主要浏览器中实现。谁知道什么时候。

在网格中，只有容器的流入子元素成为网格项，才能接受网格属性。

在网格元素上使用 display: subgrid，元素的子项遵循容器的行。

根据Grid Level 1 spec , 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