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应用于父级，才能将网格属性应用于子级。

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

另见：

网格属性不处理网格容器内的元素

1 个答案: