网格属性无法处理网格容器内的元素 [英] Grid properties not working on elements inside grid container

问题描述

我试图在CSS Grid上创建一个嵌套的 li （ ul li ul li ）最上面的 ul 。没有爱（它不工作）。也许这是不可能的，或者我错过了什么？

I'm trying to position a nested li (ul li ul li) on a CSS Grid created on the top-most ul. No love yet (it's not working). Maybe it's not possible, or I'm missing something?

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

推荐答案

格的范围格式化上下文 仅限于父子关系。

The scope of a grid formatting context is limited to a parent-child relationship.

这意味着网格容器始终是父网格，并且网格项始终孩子。网格属性仅适用于这种关系。

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

子网之外的网格容器的后代不属于网格布局，不接受网格属性。

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

您试图将网格属性应用于网格容器的子元素，但不是子元素。这些元素超出了网格布局的范围。

You're trying to apply grid properties to elements that are descendants, but not children, of a grid container. Those elements are outside the scope of grid layout.

底线：您将始终需要应用 display：grid 或 display：inline-grid 到父项，以便将栅格属性应用到子项。

Bottom line: You will always need to apply display: grid or display: inline-grid to a parent in order to apply grid properties to the child.

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

Note that grid items can also be grid containers.

另请参阅：

• 定位主容器中网格项的内容（子网格特征）


• 嵌套柔性容器时正确使用柔性属性

• Positioning content of grid items in primary container (subgrid feature)
• Proper use of flex properties when nesting flex containers

这篇关于网格属性无法处理网格容器内的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！