Html 网格属性对网格容器内的元素不起作用

Html 网格属性对网格容器内的元素不起作用,html,css,grid,css-grid,Html,Css,Grid,Css Grid,我正在尝试将嵌套的li(ul-li-ul-li)放置在最上面的ul上创建的CSS网格上。还没有爱(它不起作用)。也许这不可能,或者我错过了什么 #orgChart ul.orgChartLevel1{ 显示:网格; 网格模板列:12px自动; 网格模板行:100px自动; 网格行间距:30px; } #orgChart li.orgChartLevel2b{ 网格列开始:2; 网格柱端:3; 网格行开始:2; 网格行端:3; } 的范围仅限于父子关系 这意味着网格容器始终是父容器

我正在尝试将嵌套的
li
ul-li-ul-li
)放置在最上面的
ul
上创建的CSS网格上。还没有爱(它不起作用)。也许这不可能,或者我错过了什么

#orgChart ul.orgChartLevel1{
显示:网格;
网格模板列:12px自动;
网格模板行:100px自动;
网格行间距:30px;
}
#orgChart li.orgChartLevel2b{
网格列开始:2;
网格柱端:3;
网格行开始:2;
网格行端:3;
}
的范围仅限于父子关系

这意味着网格容器始终是父容器,网格项始终是子容器。网格属性仅在此关系中起作用

子级之外的网格容器的子体不属于网格布局的一部分,并且不接受网格属性

您正在尝试将网格属性应用于作为网格容器的子体而不是子体的元素。这些元素不在网格布局的范围内

底线:您将始终需要将
display:grid
display:inline grid
应用于父级,以便将网格属性应用于子级

请注意,网格项也可以是网格容器

另见:


半成功!所有浏览器都喜欢嵌套网格方法(li.orgChartLevel1a成为网格)。现在,对于那些讨厌的旧规范规则和Edge的-ms-prefixes。。。