4

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ted Fitzpatrick
  • 910
  • 1
  • 8
  • 18

1 Answers1

12

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.

Bottom line: You will need to apply display: grid or display: inline-grid to a parent in order to apply grid properties to the child. Or, you will need to remove the wrapper standing between the grid container and the items needing to accept grid rules.

Note that grid items can also be grid containers.

Also see:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Semi-success! All of the browsers liked the nested grids approach (li.orgChartLevel1a becomes a grid). Now for those pesky old-spec rules and -ms- prefixes for Edge ... – Ted Fitzpatrick Oct 18 '17 at 21:20