如何实现HTML网格的横向与纵向滚动，避免大网格布局错乱？

当前代码在生成小网格（如10行）时显示正常，但生成100行这类大网格时会出现布局错乱。以下是修复方案，确保网格始终保持正方形单元格，同时支持横向、纵向滚动：

完整修复代码 #

HTML #

<div class="scroll-container">
  <div id="container"></div>
</div>

CSS #

/* 滚动容器：超出视口时自动显示滚动条 */
.scroll-container {
  overflow: auto;
  max-width: 100vw;
  max-height: 100vh;
  padding: 10px;
}

/* 网格容器：用CSS Grid实现规整的二维布局 */
#container {
  display: grid;
  gap: 0; /* 如需单元格间距，可调整此值 */
}

/* 网格单元格：强制保持正方形且大小统一 */
#container > div {
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;
  aspect-ratio: 1; /* 固定宽高比1:1，确保始终是正方形 */
}

JavaScript #

function createGrid(numberOfRows) {
  const container = document.getElementById("container");
  container.innerHTML = "";
  
  // 动态设置网格的行列数量
  container.style.gridTemplateColumns = `repeat(${numberOfRows}, 25px)`;
  container.style.gridTemplateRows = `repeat(${numberOfRows}, 25px)`;
  
  // 批量生成所有网格单元格
  for (let i = 0; i < numberOfRows * numberOfRows; i++) {
    const cell = document.createElement("div");
    container.appendChild(cell);
  }
}

// 页面加载时生成10行网格，测试大网格可改为createGrid(100)
window.onload = () => createGrid(10);

关键修改说明 #

1. 新增滚动容器：通过.scroll-container限制网格最大宽高为视口尺寸，超出时自动触发横向/纵向滚动，避免网格溢出打乱页面布局。
2. 替换为CSS Grid布局：抛弃原有的float和display: table方案，利用Grid原生的二维布局能力，彻底解决大网格换行错乱的问题。
3. 强制正方形单元格：使用aspect-ratio: 1确保单元格始终保持正方形，即使后续调整单元格大小也不会变形。
4. 简化JS逻辑：无需再生成嵌套的行容器，直接生成所有单元格，Grid会自动按设定的行列数规整排列，代码更高效简洁。

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