Nested lists in grid pattern

Giganews Newsgroups
Subject: Nested lists in grid pattern
Posted by:  Andrew Poulos (ap_pr…
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.


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

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

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.


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