将深度嵌套的元素放置在更高级别的网格容器中 | 将深度嵌套的元素放置在更高级别的网格容器中

本文介绍了将深度嵌套的元素放置在更高级别的网格容器中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

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`

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:

More information:

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