在主容器中放置网格项的内容(子网格功能) [英] Positioning content of grid items in primary container (subgrid feature)

问题描述

所有有关CSS网格的指南似乎都暗示着一种结构，其中放置在网格中的元素是网格本身的子级.

All guides about CSS grid seem to imply a structure where the elements positioned in a grid are children of the grid itself.

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

.wrapper具有display: grid并定义了网格属性的地方.

Where .wrapper has display: grid and a definition of the grid properties.

如果我想将作为网格孙子元素"的元素放置在网格本身上(而不是依赖于其父元素)有意义吗?

Does it make any sense if I want to position a element that is a "grandchild" of the grid, on the grid itself (instead of relying on its parent ?)

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

在这里，我希望能够将A，B和C分别放在自己的网格行上；甚至有道理吗?

Here, I want to be able to put A, B and C each on their own row of the grid; would that even make sense ?

推荐答案

display: subgrid

CSS网格2级规范草案:

display: subgrid

From the CSS Grid Level 2 draft spec:

2.网格容器

子网格提供了通过嵌套元素向下传递网格参数的功能，并将基于内容的大小调整信息传回到其父网格.

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

如果元素是网格项(即，它是流入项，并且其父项是 网格容器)，display: subgrid将元素设为子网格(这是一个 特殊类型的网格容器框)，因此忽略了它 grid-template-*和grid-*-gap属性，建议采用 父网格跟踪它的跨度.

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.子网格

通过赋予display: grid网格项本身可以成为网格容器.在这种情况下，其内容的布局将独立于其参与的网格的布局.

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.

在某些情况下，多个网格项目的内容可能必须彼此对齐.本身是网格项目的网格容器可以使用display: subgrid将其行和列的定义推迟到其父网格容器，使其成为子网格.

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.

主要浏览器尚未实现此功能.谁知道什么时候会发生.

This feature has not yet been implemented in major browsers. Who knows when it will be.

在Grid中，只有容器的流入子级才成为网格项，并且可以接受网格属性.

In Grid, only the in-flow children of the container become grid items and can accept grid properties.

在网格项目上使用display: subgrid时，该项目的子项尊重容器的行.

With display: subgrid on a grid item, the children of the item respect the lines of the container.

根据网格级别1规范， display: subgrid已推迟到 2级.

目前，在某些情况下，对网格项目(即嵌套网格容器)的display: grid可能有用.

For now, display: grid on grid items (i.e., nested grid containers) may be useful in some cases.

另一个可能的解决方法是display: contents.该方法在这里说明:

Another possible workaround is display: contents. The method is explained here:

• css子网格的替代方法是什么?

更多信息:

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

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

这篇关于在主容器中放置网格项的内容(子网格功能)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！