我正在尝试在最顶部创建的CSS网格上放置一个嵌套li(ul li ul li)ul。还没有爱(它不起作用)。也许这是不可能的,或者我缺少了什么?
li
ul li ul li
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>
一个范围 格格式化的内容被限制为父子关系。
这意味着网格容器始终是父级,而网格项目始终是子级。网格属性仅在此关系内起作用。
子代以外的网格容器的后代不属于网格布局,并且不接受网格属性。
您正在尝试将网格属性应用于属于网格容器的子元素而不是子元素的元素。这些元素不在网格布局的范围内。
底线:为了将网格属性应用于子级,您将始终需要应用display: grid或display: inline-grid应用于父级。
display: grid
display: inline-grid
请注意,网格项目也可以是网格容器。