如何修复嵌套Grid网格布局问题？

问题根源 #

嵌套<ol>会继承父级网格的列定义，但默认会占满父<li>的全部网格列，导致子列表的计数器区域和父列表项的计数器（::before）重叠，引发排版错乱。你添加0宽度列的尝试没解决问题，核心是没限制嵌套列表的网格列范围。

解决方案 #

给嵌套的<ol>设置grid-column: 2 / -1，让它从父列表的第二列开始布局，避免和父列表的计数器区域冲突：

ol {
  counter-reset: Nr;
  list-style: none;
  display: grid;
  grid-template-columns: min-content 1fr;
  border: 2px solid rgba(255, 0, 0, .2);
  padding: 1rem;
  li {
    counter-increment: Nr;
    background-color: rgba(0, 0, 0, .1);
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    margin-bottom: 2pt;
    &::before {
      margin-right: 0.1rem;
      content: counters(Nr, ".") "\00a0";
      text-align: end;
    }
  }
  /* 限制嵌套ol的网格列范围 */
  ol {
    grid-column: 2 / -1;
  }
}

完整示例代码 #

HTML

<h2>修复后效果</h2>
<ol>
  <li>这是第一个列表项。</li>
  <li>这是第二个列表项。
    <ol>
      <li>这是一个嵌套列表项。</li>
      <li>这是另一个嵌套列表项。
        <ol>
          <li>这是三级嵌套列表项。</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>这是第三个列表项。</li>
</ol>

效果说明 #

修改后，所有嵌套列表会自动缩进，计数器（如1.1、1.1.1）会和父列表的内容区域对齐，不会再出现重叠或布局错乱的问题，同时保留subgrid的布局特性。

内容的提问来源于stack exchange，提问作者Adler