如何将动态元素菜单拆分为两个自适应不同宽度的列？

方案1：纯CSS优化columns布局（无需JS） #

你之前使用columns属性的问题核心在于ul默认是块级元素，会占满父容器全宽，强制两列各分配50%宽度。仅需修改容器的display属性即可解决问题：

ul {
  display: inline-block; /* 让容器宽度自适应内容总宽度 */
  column-gap: 40px;
  columns: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  margin-bottom: 10px;
  break-inside: avoid; /* 防止单个列表项被拆分到两列显示 */
}
/* 如果需要整个菜单在父容器内居中，给父元素添加 text-align: center 即可 */

这个方案不需要修改JS，完全适配动态增减的列表项，列宽会根据内容自动调整，不会出现多余空白。

方案2：Grid布局+少量JS动态计算行数 #

如果你偏好使用grid布局做更精细的控制，可以通过JS动态获取列表项数量，自动计算需要的行数，无需手动硬编码：

ul {
  display: inline-grid; /* 容器宽度自适应内容 */
  gap: 10px 40px;
  grid-auto-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

const menu = document.querySelector('ul');
const itemCount = menu.querySelectorAll('li').length;
// 向上取整计算行数，兼容奇数/偶数个列表项
const rowCount = Math.ceil(itemCount / 2);
menu.style.gridTemplateRows = `repeat(${rowCount}, auto)`;

当列表项数量动态变化时，重新执行一次上述JS逻辑即可更新布局。

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