Nested lists in grid pattern

Giganews Newsgroups
Subject: Nested lists in grid pattern
Posted by:  Andrew Poulos (ap_pr…@hotmail.com)
Date: Wed, 12 Aug 2020

I have an ordered list with this css:

list-style-position: inside;
padding-left: inherit;

that also contains nested ordered lists.

<ol>
  <li>a</li>
  <li>b</li>
  <li>
    <ol>
      <li>
        <ol>
          <li>i</li>
          <li>ii</li>
        </ol>
      </li>
      <li>d</li>
      <li>e</li>
        <ol>
          <li>iii</li>
          <li>iv</li>
          <li>v</li>
          <li>vi</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>f</li>
</ol>

Each list item (that doesn't contain an OL) looks like this:

<li>
  <img src="test.jpg">
  <p style="margin: 0px; text-align: center;">Desc</p>
</li>

and has this (simplified) CSS that puts a number at the top:

li::before {
  counter-increment: slide;
  content: counter(slide);
}

The list items typically display as a series running down the page. I
now need a way to display the items horizontally with the nested list
items running vertically eg.

a---b---i---d---e---iii---f
--------ii----------iv-----
--------------------v------
--------------------vi-----

The list can scroll horizontally and vertically as necessary.

I thought I could simply set the display of each OL to flex but the last
item 'f' ends up next to 'b' instead of after "iii - vi".

How can I solve this?

Andrew Poulos

Replies