html - 网格属性不适用于网格容器内的元素

Question

我正在尝试将嵌套的 li(ul li ul li)放置在最顶层 ul 上创建的 CSS 网格上.还没有爱(它不起作用)。也许这是不可能的，或者我遗漏了什么？

#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>

Answer 1

范围 grid formatting context仅限于亲子关系。

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

子级之外的网格容器的后代不是网格布局的一部分，不会接受网格属性。

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

底线:您需要将 display: grid 或 display: inline-grid 应用于父级，以便将网格属性应用于子级。或者，您需要移除位于网格容器和需要接受网格规则的元素之间的包装器。

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

另见:

• Position deeply nested elements in a higher level grid container
• Proper use of flex properties when nesting flex containers
• Is it bad practice to nest CSS Grids?