如何修复嵌套网格布局？

Question

在下面的示例中您可以看到问题。我尝试将网格容器（ol）的 grid-tample-colums 属性更改为

grid-template-columns: min-content 1fr 0;

。但我被困住了。

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;
    }
  }
}

<h2>This works</h2>
<ol>
  <li>This is the first list item.</li>
  <li>This is the second list item.</li>
  <li>This is the third list item.</li>
</ol>

<h2>This is broken</h2>
<ol>
  <li>This is the first list item.</li>
  <li>This is the second list item.
    <ol>
      <li>This is a nested list item.</li>
      <li>This is a nother nested list item.</li>
    </ol>
  </li>
  <li>This is the third list item.</li>
</ol>

ol {
  counter-reset: Nr;
  list-style: none;
  display: grid;
  grid-template-columns: min-content 1fr 0;
  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;
    }
  }
}

<h2>My Attempt</h2>
<ol>
  <li>This is the first list item.</li>
  <li>This is the second list item.
    <ol>
      <li>This is a nested list item.</li>
      <li>This is a nother nested list item.</li>
    </ol>
  </li>
  <li>This is the third list item.</li>
</ol>

Answer 1

将

grid-column: 1 / -1;

添加到

ol

中，它将修复嵌套的：

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;
  grid-column: 1 / -1;
  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;
    }
  }
}

<h2>This works</h2>
<ol>
  <li>This is the first list item.</li>
  <li>This is the second list item.</li>
  <li>This is the third list item.</li>
</ol>

<h2>This is broken</h2>
<ol>
  <li>This is the first list item.</li>
  <li>This is the second list item.
    <ol>
      <li>This is a nested list item.</li>
      <li>This is a nother nested list item.</li>
    </ol>
  </li>
  <li>This is the third list item.</li>
</ol>