如何用CSS grid实现自动分2个等元素自动宽度列的垂直菜单

解决方案 #

方案1：使用CSS多列布局（最优解，无需手动计算行数） #

CSS原生的columns系列属性就是专门为这类多列列表流场景设计的，完全不需要手动计算元素总数，浏览器会自动将列表项大致均分到两列，符合你所有需求。
代码示例：

ul {
  /* 固定分为2列 */
  column-count: 2;
  /* 两列之间的间距，对应你原来的grid列间距 */
  column-gap: 40px;
  padding: 0;
  list-style: none;
}

li {
  /* 行间距，对应你原来的grid行间距 */
  margin-bottom: 10px;
  /* 防止单个列表项被拆分到两列显示 */
  break-inside: avoid;
}

如果需要同时限制列的最小宽度，避免容器太窄时列被压得太窄，可以额外加column-width配置，浏览器会自动在最多2列和最小列宽之间做自适应：

ul {
  column-width: 150px;
  column-count: 2;
  column-gap: 40px;
}

方案2：Grid方案（需要极少量JS配合） #

原生CSS目前暂时无法直接获取子元素的总数量来动态计算行数，如果你一定要用Grid实现，可以用少量JS动态设置行数：

const ul = document.querySelector('ul')
const liCount = ul.querySelectorAll('li').length
// 向上取整计算行数，保证两列数量大致相等
const rowCount = Math.ceil(liCount / 2)
ul.style.gridTemplateRows = `repeat(${rowCount}, 1fr)`

CSS部分保留你原来的写法即可：

ul {
  display: grid;
  gap: 10px 40px;
  grid-auto-flow: column;
}

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