Динамический макет CSS для мегаменю, которое читается строками или столбцами в зависимости от количества пунктов меню

Я создаю прототип мегаменю, в котором пункты меню должны отображаться «умно», где, в зависимости от количества пунктов меню, они будут читаться либо в виде строки, либо в виде столбцов.

У пунктов меню будут свои дочерние элементы, поэтому на самом деле они такие:

 mega menu left text | menu item 1   menu item 2   menu item 3
                     | sublink1 A    sublink2 A    sublink3 A
                     | sublink1 B    sublink2 B
                     | sublink1 C

Я не включаю приведенные ниже для простоты.

Отображение будет зависеть от количества пунктов меню. Например, если бы в меню было 1–3 пункта, оно выглядело бы как строка:

mega menu left text | menu item 1   menu item 2   menu item 3

Если бы в меню было более трех пунктов, оно читалось бы как столбцы: сверху вниз, затем вправо, но все равно нужно быть «умным», поскольку пункт меню 4 находится в отдельном столбце, а не под пунктом меню. 3 (всегда необходимо поддерживать 3 столбца с правой стороны):

mega menu left text | menu item 1   menu item 3   menu item 4
                    | menu item 2

5 пунктов меню:

mega menu left text | menu item 1   menu item 3   menu item 5
                    | menu item 2   menu item 4

6 пунктов меню:

mega menu left text | menu item 1   menu item 3   menu item 5
                    | menu item 2   menu item 4   menu item 6

7 пунктов меню:

mega menu left text | menu item 1   menu item 4   menu item 7
                    | menu item 2   menu item 5
                    | menu item 3   menu item 6

8 пунктов меню:

mega menu left text | menu item 1   menu item 4   menu item 7
                    | menu item 2   menu item 5   menu item 8
                    | menu item 3   menu item 6

9 пунктов меню:

mega menu left text | menu item 1   menu item 4   menu item 7
                    | menu item 2   menu item 5   menu item 8
                    | menu item 3   menu item 6   menu item 9

10 пунктов меню:

mega menu left text | menu item 1   menu item 5   menu item 9
                    | menu item 2   menu item 6   menu item 10
                    | menu item 3   menu item 7   
                    | menu item 4   menu item 8

Есть ли способ сделать это элегантно в CSS? Я думал, что столбцы CSS могут сделать это, но это не совсем работает. Вот скрипт/демо: если вы переместите ползунок слева, вы увидите, куда он упадет:

https://jsfiddle.net/vsdpjwn9/
Здесь используется break-inside: avoid-column; на <li>

https://jsfiddle.net/3x8scuwt/
Здесь используется display: inline-block; на <li>

Я также попробовал отдельный прототип с флексбоксом, но он, похоже, развалился быстрее, поэтому я отказался от него. Похоже, что CSS-сетка будет такой же. Дело в том, что эти пункты меню будут динамическими, их будет разное количество, каждый с разным количеством подссылок. Вероятно, будет не более 3 строк, но я не хочу от этого зависеть.

Любое решение css или потребует, чтобы javascript установил собственный макет в зависимости от количества отдельных пунктов меню?

Он также должен быть отзывчивым, но пункты меню по сути представляют собой аккордеоны, которые накладываются друг на друга.

Вот один из кодов скрипки:

HTML:

<div id = "container">
  <div class = "left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    <div style = "margin-top:1rem;">
      <input id = "slider" type = "range" min = "1" max = "8" value = "8">
      <p id = "slider-output" style = "margin-top:0;"></p>
    </div>

  </div>

  <div class = "right">
    <ul>
      <li class = "1">
          <h4>1 Secondary Content</h4>
          <a href = "#a1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#a2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#a3">Lorem ipsum dolora</a><br>
          <a href = "#a4">Lorem ipsum dolora</a><br>
          <a href = "#a5">Lorem ipsum dolora</a>
      </li>

      <li class = "2">
          <h4>2 Secondary Content</h4>
          <a href = "#b1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#b2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#b3">Lorem ipsum dolora</a><br>
          <a href = "#b4">Lorem ipsum dolora</a><br>
          <a href = "#b5">Lorem ipsum dolora</a><br>
          <a href = "#b6">Lorem ipsum dolora</a>
      </li>

      <li class = "3">
          <h4>3 Secondary Content</h4>
          <a href = "#c1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#c2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#c3">Lorem ipsum dolora</a><br>
          <a href = "#c4">Lorem ipsum dolora</a>
      </li>

      <li class = "4">
          <h4>4 Secondary Content</h4>
          <a href = "#d1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#d4">Lorem ipsum dolora</a>
      </li>

      <li class = "5">
          <h4>5 Secondary Content</h4>
          <a href = "#e1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#e2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#e3">Lorem ipsum dolora</a><br>
          <a href = "#e4">Lorem ipsum dolora</a><br>
          <a href = "#e5">Lorem ipsum dolora</a>
      </li>

      <li class = "6">
          <h4>6 Secondary Content</h4>
          <a href = "#f1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#f2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#f3">Lorem ipsum dolora</a><br>
          <a href = "#f4">Lorem ipsum dolora</a><br>
          <a href = "#f5">Lorem ipsum dolora</a><br>
          <a href = "#f6">Lorem ipsum dolora</a>
      </li>

      <li class = "7">
          <h4>7 Secondary Content</h4>
          <a href = "#g1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#g2">Lorem ipsum dolora</a>
      </li>
      
      <li class = "8">
          <h4>8 Secondary Content</h4>
          <a href = "#h1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#h2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
          <a href = "#h3">Lorem ipsum dolora</a><br>
          <a href = "#h4">Lorem ipsum dolora</a><br>
      </li>
    </ul>
  </div>
</div>

CSS:

    #container {
    width: 900px;
    min-height: 400px;
    display: flex;
    gap: 40px;
    padding: 1em;
    border: 1px solid #ccc;
}
.left {
    width: 25%;
    padding-right: 40px;
    border-right: 1px solid #ccc;
}
.right {
    width: 100%;
    margin-left: auto;
}
/*
ul {
  border: 1px solid red;
  height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
*/

ul {
  list-style: none;
  columns: 3;
  column-gap: 25px;
  margin: 0;
  padding: 0;
  width: 98%;
  border: 1px solid blue;
}

li {
  border: 1px solid red;
  list-style-type: none;
  margin: 0 0 15px 0;
  
  /*display: inline-block;*/
  break-inside: avoid-column;
  
}
li:first-child {
  margin-top: 0;
}

li a {
  display: inline-block;
  margin: .125rem 0;
}

h4 {
  margin: 0;
}

[hidden] {
  display: none !important;
}

ЯС:

    const slider = document.getElementById('slider');
const output = document.getElementById('slider-output');
const LIs = document.querySelectorAll('li');

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;

  LIs.forEach(li => {
    if (+li.classList.value > slider.value) {
      li.setAttribute('hidden', '');
    } else {
      li.removeAttribute('hidden');
    }
  });
}