如何按类将ul列表元素分为多列并保持指定顺序？

需要将包含不同类名(c1/c2，未来可能扩展c3/c4等)的<ul>列表按类分组为多列，且保持每个类下元素在原DOM中的顺序。

现有HTML结构：

<ul>
  <li class="c1">1</li>
  <li class="c1">3</li>
  <li class="c1">2</li>
  <li class="c2">4</li>
  <li class="c1">5</li>
  <li class="c2">6</li>
  <li class="c2">7</li>
  <li class="c1">8</li>
</ul>

当前使用的CSS（效果不符合需求）：

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

当前错误布局：

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

预期正确布局：

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

已尝试过的方法：

• 使用li:nth-child(x)+break，但元素数量不固定，无法通用
• 给不同类设置float: left/right，但无法扩展到多列
• 使用Bootstrap的d-flex、col、order属性，无效

优先选择纯CSS方案，其次JavaScript，最后考虑重构DOM结构。

一、纯CSS Grid方案（推荐） #

利用CSS Grid的grid-column属性，直接指定每个类的元素归属列，完美适配多列扩展需求，且无需修改DOM结构。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 定义列数，未来扩展3列就改成repeat(3, 1fr) */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 可选：设置列间距 */
  gap: 15px;
}

/* 给每个类指定对应列 */
li.c1 {
  grid-column: 1;
}

li.c2 {
  grid-column: 2;
}

/* 未来扩展c3列时，添加如下代码 */
/* li.c3 {
  grid-column: 3;
} */

原理：Grid会按照元素在DOM中的顺序，将对应类的元素依次放入指定列，自动保持每个类下元素的原有顺序，完全符合预期效果。

二、JavaScript方案（兼容老场景） #

如果需要兼容不支持CSS Grid的老浏览器，可以通过JS按类分组元素，重构列结构：

1. JavaScript代码 #

const originalList = document.querySelector('ul');
const classGroups = {};

// 按类名分组所有li元素
Array.from(originalList.children).forEach(li => {
  const className = li.className;
  if (!classGroups[className]) {
    classGroups[className] = [];
  }
  classGroups[className].push(li);
});

// 清空原列表，重新构建列容器
originalList.innerHTML = '';
originalList.style.display = 'flex';
originalList.style.gap = '15px';

// 为每个类创建单独的列列表
Object.values(classGroups).forEach(group => {
  const columnList = document.createElement('ul');
  columnList.style.listStyle = 'none';
  columnList.style.padding = '0';
  columnList.style.flex = '1';
  
  group.forEach(li => columnList.appendChild(li));
  originalList.appendChild(columnList);
});

2. 效果说明 #

执行后原<ul>会变成flex容器，内部每个类对应一个子<ul>作为列，自动保持每个类下元素的原有顺序，且支持扩展更多类（自动生成对应列）。

三、重构DOM结构方案（最后选择） #

如果前两种方案都无法满足，可直接在生成DOM时按类分组为多列结构，后续布局更简单：

1. 重构后的HTML #

<div class="columns-container">
  <ul class="column c1-column">
    <li>1</li>
    <li>3</li>
    <li>2</li>
    <li>5</li>
    <li>8</li>
  </ul>
  <ul class="column c2-column">
    <li>4</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

2. 对应CSS #

.columns-container {
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

.column {
  list-style: none;
  padding: 0;
  flex: 1;
}

.column li {
  margin-bottom: 8px;
}

内容的提问来源于stack exchange，提问作者Tanker