htmlcsscss-gridnested-lists

How can I specifically "exclude" an element from a css grid/subgrid or position it correctly in a complex entanglement of nested grids…

* {
  outline: 1px solid rgba(255, 0, 0, .2);
}

ol {
  *:not(li) {
    grid-area: none;
    /* hmmm... this is not right*/
  }
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column: subgrid;
  li {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    width: 100%;
  }
}

ol {
  counter-reset: Nr;
  *::before {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  >li {
    counter-increment: Nr;
    &::before {
      content: counter(Nr) ".";
      text-align: end;
      margin-right: 0.85rem;
    }
    >ol {
      counter-reset: lit;
      >li {
        counter-increment: lit;
        &::before {
          content: counter(lit, lower-latin)')';
        }
        >ol {
          counter-reset: sublit;
          >li {
            counter-increment: sublit;
            &::before {
              content: counter(sublit, lower-roman) '.';
            }
          }
        }
      }
    }
  }
}
<ol>
  <li>
    This is <strong>txt</strong> hi.
    <ol>
      <li>This li is not affected.</li>
    </ol>
  </li>
</ol>

I would like to have all inline-elements such as the strong from the example behave normally and not get influenced by any grid/subgrid layouts… Also, everything in the same li after the strong element in the example is broken, too.

What I have tried so far is manipulating the display property and the grid property of any non-li item. My latest approach is in the code with a comment next to it.

It should look like this: [It should look like this1

But the snippet output is:

enter image description here

Why I am using grid? I want to have maximum control over the width of the numbers/bullets, their "padding" (e. g. exactly centering a variable/unknown-width number in the "column of numbers") and the extent of indentation of any sub-lists...

For example: indent from the left should be exactly 1 cm while perfectly centering what ever bullet is being used + aligning numbers with different digit lengths to another correctly and letting any sub-lists numbering begin with its left edge exactly where the previous li text started... and so on, all at the same time and with granular control and maximum flexibility.

Solution

  • grid-area: none; was wrong

    instead I used display: contents;

    Nested lists did not display correctly then. But this is just because they were not accounted for in the :not() function. Added ol and ul to the function.

    Now everything displays correctly.

    * {
  outline: 1px solid rgba(255, 0, 0, .2);
}

li > *:not(ul, ol) {
    /* I have added ol, ul to the :not() function to make list nesting work again and improved the syntax*/
    
    display: contents; /* this fixes it */    
  }
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-column: subgrid;
  li {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    width: 100%;
  }
}

ol {
  counter-reset: Nr;
  *::before {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  >li {
    counter-increment: Nr;
    &::before {
      content: counter(Nr) ".";
      text-align: end;
      margin-right: 0.85rem;
    }
    >ol {
      counter-reset: lit;
      >li {
        counter-increment: lit;
        &::before {
          content: counter(lit, lower-latin)')';
        }
        >ol {
          counter-reset: sublit;
          >li {
            counter-increment: sublit;
            &::before {
              content: counter(sublit, lower-roman) '.';
            }
          }
        }
      }
    }
  }
}
    <ol>
  <li>
    This is <strong>txt</strong> hi.
    <ol>
      <li>This li is not affected.</li>
    </ol>
  </li>
</ol>