How can I fix nested gird layout?

Question

In the example below you can see the issue. I have tried changing the grid-tample-colums property of the grid-container (ol) to grid-template-columns: min-content 1fr 0; . But I am stuck.

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

Add grid-column: 1 / -1; to the ol and it will fix the nested ones:

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

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

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