关于CSS网格的所有指南似乎都暗示了一种结构,其中位于网格中的元素是网格本身的子元素.
<div class="wrapper">
<div>A</div>
<div>B</div>
</div>
凡.wrapper具有display: grid和网格属性的定义.
如果我想在网格本身上放置一个网格的"孙子"元素(而不是依赖于它的父级？),这是否有意义？
<div class="wrapper">
<div>A</div>
<div>
<div>B</div>
<div>C</div>
</div>
</div>
在这里,我希望能够将A,B和C各自放在他们自己的网格行上; 这甚至有意义吗？
我正在尝试将嵌套li(ul li ul li)放置在最顶层创建的CSS网格上ul.没有爱(它没有用).也许这是不可能的,或者我错过了什么？
#orgChart ul.orgChartLevel1 {
display: grid;
grid-template-columns: 12px auto;
grid-template-rows: 100px auto auto;
grid-row-gap: 30px;
}
#orgChart li.orgChartLevel2b {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}<ul class="orgChartLevel1">
<li class="orgChartLevel1a">
<ul class="orgChartLevel2">
<li class="orgChartLevel2b">
</li>
</ul>
</li>
</ul>