htmlcssflexboxcss-gridhtml-lists

How can I fix nested gird layout?


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>


Solution

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