CSS实现3列等高自动分页的Cheat Sheet速查表布局

原有代码无法实现预期效果的核心原因是CSS原生多列布局属于单连续流布局：给单个多列容器设置固定高度后，超出容器范围的内容只会按普通文档流溢出，不会自动拆分生成新的独立3列行块。

方案1：多列布局+少量JS（完美匹配原有逻辑，推荐） #

完全保留你原本使用的多列填充规则，只需要极少量JS自动拆分溢出内容到新的等高3列块，不需要手动调整HTML结构。
首先调整CSS样式：

.box {
  box-sizing: border-box;
  width: 100%;
  height: 100px; /* 单组3列块的固定高度 */
  margin-bottom: 16px; /* 不同行块之间的间距，可按需调整 */
  column-count: 3;
  column-rule: 2px solid black;
  column-fill: auto;
}
/* 避免单个子项被拆分到两列 */
.box > div {
  break-inside: avoid;
  padding: 4px 8px;
}

在页面底部添加以下JS代码，页面加载时会自动拆分溢出内容，生成新的3列块：

function splitColumnBlocks() {
  const BLOCK_HEIGHT = 100; // 和CSS中.box的height值保持一致
  const boxes = document.querySelectorAll('.box');
  
  boxes.forEach(box => {
    // 循环检测当前块是否内容溢出
    while (box.scrollHeight > box.clientHeight) {
      const newBlock = document.createElement('div');
      newBlock.className = 'box';
      // 把溢出的子元素移动到新块中
      while (box.scrollHeight > box.clientHeight) {
        const lastItem = box.lastElementChild;
        if (!lastItem) break;
        newBlock.prepend(lastItem);
      }
      // 将新块插入到当前块后方
      box.after(newBlock);
      // 检测新块是否存在溢出，循环处理
      box = newBlock;
    }
  });
}
// 页面资源加载完成后执行拆分
window.addEventListener('load', splitColumnBlocks);

如果后续有动态新增内容的需求，在内容更新后重新调用splitColumnBlocks()即可自动重新排布。

方案2：纯CSS Grid实现（无JS） #

如果不想引入JS，可以使用Grid布局实现，通过调整网格流方向模拟多列的纵向填充逻辑：

.box {
  display: grid;
  width: 100%;
  /* 自动生成固定高度100px的行 */
  grid-template-rows: repeat(auto-fill, 100px);
  /* 每行固定3列等宽 */
  grid-template-columns: repeat(3, 1fr);
  /* 纵向优先填充：先填满当前列的所有行，再填充下一列 */
  grid-auto-flow: column;
  /* 模拟列分隔线 */
  column-gap: 0;
  border-right: 2px solid black;
  margin-bottom: 16px;
}
.box > div {
  border-left: 2px solid black;
  padding: 4px 8px;
  break-inside: avoid;
}
/* 去掉每行第一个元素的重复左边框 */
.box > div:nth-child(3n + 1) {
  border-left: none;
}

注意：该方案的填充逻辑和原生多列存在细微差异，如果子元素高度不固定，对齐效果不如方案1精准。

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