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

问题描述

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