将深层嵌套的元素放置在更高级别的网格容器中 [英] Position deeply nested elements in a higher level grid container

问题描述

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

<div>A</div><div>B</div>

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

如果我想定位一个孙子"元素是否有意义?的网格，在网格本身(而不是依赖其父?)

<div>A</div><div><div>B</div><div>C</div>

我想放置A, B &C 每个在自己的网格行上；这甚至有意义吗?

解决方案

display: subgrid

来自 CSS Grid Level 2 草案规范:

<块引用>

2.网格容器

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

如果元素是一个网格项(即它是流入的并且它的父元素是一个网格容器)，display: subgrid 使元素成为子网格(这是一个特殊类型的网格容器盒)，因此忽略了它的grid-template-* 和 grid-*-gap 属性支持采用父网格跟踪它跨越的轨迹.

3.子网格

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

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

在这种情况下，子网格的网格项参与调整父网格容器的网格大小，允许两个网格的内容对齐.阅读更多内容.

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

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

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

根据 网格级别 1 规范，<代码>显示:子网格已推迟到Level 2.

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

另一种可能的解决方法是display:contents.该方法解释如下:

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

更多信息:

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

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

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

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>

I want to place A, B & C each on their own row of the grid; would that even make sense?

解决方案

display: subgrid

From the 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.

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

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

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

According to the Grid Level 1 spec, display: subgrid has been deferred to Level 2.

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

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

• What is an alternative to css subgrid?

More information:

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

这篇关于将深层嵌套的元素放置在更高级别的网格容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！