X n. of columns with ul li but keep the same order-CodePudding

Right now there is only two columns needed, eventually there, may be a third column or more.

<ul>
  <li >1</li>
  <li >3</li>
  <li >2</li>
  <li >4</li>
  <li >5</li>
  <li >6</li>
  <li >7</li>
  <li >8</li>
</ul>

The order on that list is the correct order, now we need two columns as per the c1 and c2 class. my css is something like this.

ul {
 margin:0; padding:0;
 list-style: none;
 column:2;
 li {
  float: left;
 }
}

with that basic CSS I'm getting the two columns but not the correct amount.

------------
|  1  |  5 |
|  3  |  6 |
|  2  |  7 |
|  4  |  8 |
------------

You might say, well, what's the problem there you have your two columns, yes and nop, what's needed is the following.

------------
|  1  |  4 |
|  3  |  6 |
|  2  |  7 |
|  5  |    |
|  8  |    |
------------

I could use the li:nth-child(x) and break it after Xn li but not always is the same, now I was thinking to use class c1 as float left and c2 for float right, but what if there are c3 which could mean a third column or c4.
I have try bootstrap d-flex, col, order but is not working for this.
I'm not good with CSS to do this and I prefer not use JavaScript but if there is no solution with only CSS then I'm gonna explore that option, last and the easiest way is to re-do the array output and make the 2 or 3 or xn array(blocks) per column, which mean increasing the number of line code.
Thank you for taking the time.

CodePudding user response：

It seems that display: grid might be suitable for the desired layout. If there is a c3 class later, it just need to have grid-column: 3 set to be placed in the third column.

Example:

ul {
  display: grid;
  grid-auto-columns: 100px;
  grid-auto-flow: column dense;
}

.c1 {
  grid-column: 1;
}

.c2 {
  grid-column: 2;
}

<ul>
  <li >1</li>
  <li >3</li>
  <li >2</li>
  <li >4</li>
  <li >5</li>
  <li >6</li>
  <li >7</li>
  <li >8</li>
</ul>