生成20×15六边形网格出现单列问题，如何修复？

问题分析 #

• 六边形元素（div）默认是块级元素，未设置横向排列的布局规则，导致每个六边形独占一行，垂直堆叠成列。
• zigzagEvenColumns函数未接收rows参数，代码中col * rows会因rows未定义抛出错误，无法实现交错偏移效果。
• 现有CSS未设置容器布局方式，也未配置六边形的水平间距，无法形成横向网格结构。

修复方案 #

步骤1：调整容器与六边形的CSS布局 #

使用Flex布局实现横向排列，同时优化间距与对齐规则：

#hexagon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; /* 控制六边形之间的水平间距 */
  padding: 20px;
}

.hex-grid__content {
  height: 25px;
  width: 30px;
  font-size: 20px;
  color: #b86d6d;
  background-color: rgb(185, 224, 211);
  clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0);
  display: flex;
  align-items: center;
  justify-content: center; /* 确保内容居中 */
  text-decoration: none;
  text-align: center;
  transition: transform 0.24s ease-out;
}

.hex-grid__content:hover {
  transform: scale(1.1);
}

步骤2：修复JS的参数与偏移逻辑 #

修正参数传递与索引计算逻辑，实现正确的六边形交错效果：

document.addEventListener("DOMContentLoaded", function() {
  const gridContainer = document.getElementById("hexagon-grid");
  const numberOfColumns = 15;
  const numberOfRows = 20;

  generateHexagonGrid(gridContainer, numberOfColumns, numberOfRows);
  zigzagEvenColumns(gridContainer, numberOfColumns, numberOfRows); // 传入rows参数
});

function generateHexagonGrid(container, columns, rows) {
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < columns; col++) {
      const hexagon = document.createElement("div");
      hexagon.classList.add("hex-grid__content");
      container.appendChild(hexagon);
    }
  }
}

function zigzagEvenColumns(container, columns, rows) { // 新增rows参数
  const hexagons = container.getElementsByClassName("hex-grid__content");

  for (let row = 0; row < rows; row++) {
    // 对奇数行的所有六边形进行水平偏移，形成交错网格
    if (row % 2 === 1) {
      for (let col = 0; col < columns; col++) {
        const hexagonIndex = row * columns + col; // 正确计算元素索引：行号*列数+列号
        const hexagon = hexagons[hexagonIndex];
        if (hexagon) {
          hexagon.style.transform = "translateX(17px)"; // 根据六边形宽度微调偏移值
        }
      }
    }
  }
}

补充说明 #

• 交错效果改为偏移奇数行的所有元素，更符合六边形网格的视觉交错逻辑。
• 水平偏移值17px可根据六边形实际显示效果微调，确保相邻行的六边形完美贴合。
• 容器的flex-wrap: wrap属性会让六边形自动换行，形成多行网格结构。

内容的提问来源于stack exchange，提问作者heheidon'tknowwhatido