Html Question posted in
Some basic documentation can be found here.

Html – How can I specificly "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 1cm 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.

Tags:

2

Answers


  1. 0

    This is a basic nested ordered list. Why do you want to use a grid?

    @counter-style l2-list-style {
  system: extends lower-alpha;
  suffix: ') ';
}

ol ol {
  padding-left: 20px;
}

ol > li > ol {
  list-style: l2-list-style;
}

ol > li > ol > li > ol {
  list-style: lower-roman;
}
    <ol>
  <li>gem
    <ol>
      <li>crosswalk</li>
      <li>unlike
        <ol>
          <li>tree</li>
          <li>snake</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>young
    <ol>
      <li>reflection</li>
      <li>undertake</li>
    </ol>
  </li>
</ol>
    Login or Signup to reply.
  2. 0

    I would consider float to achieve the same layout. I don’t think CSS grid is the right approach.

    ol {
  padding: 0;
  list-style: none;
  overflow: hidden; /* this */
}

ol {
  counter-reset: Nr;
  *::before {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  li {
    counter-increment: Nr;
    clear: both; /* and this */
    &::before {
      content: counter(Nr) ".";
      text-align: end;
      margin-right: 0.85rem;
      /* and this */
      margin-bottom: 2px;
      float: left;
      /**/
    }
    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>a <a href="">link</a> here.
          <ol>
            <li>a <a href="">link</a> here.</li>
            <li>This li is not affected.</li>     
          </ol>
      </li>
      <li>This <strong>li is not</strong> affected.</li>
      <li>This li is not affected.</li>
    </ol>
  </li>
  <li>This li is not affected.</li>
  <li>This li is not affected.</li>
</ol>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search