使用JavaScript和Flexbox创建16×16网格：横向适配容器求助

问题根源 #

1. .sketch-screen 使用了 justify-content: space-around，导致列之间存在额外间隙，无法完全填满容器宽度
2. .column 未设置Flex布局，内部的 .row 无法自动拉伸填满列的高度
3. 未启用 box-sizing: border-box，边框会额外占用空间，导致单元格尺寸超出预期

解决方案 #

1. 调整CSS样式 #

修改核心布局样式，确保网格完全填满容器并保持正方形单元格：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 关键：让边框包含在元素尺寸内 */
}

/* 其他原有样式保持不变，以下为修改/新增部分 */
.sketch-screen {
  display: flex;
  flex-direction: row;
  /* 移除space-around，默认justify-content: stretch会让子元素填满宽度 */
  width: 600px;
  height: 600px;
  background-color: #bfbfbf;
}

.sketch-screen > .column {
  display: flex;
  flex-direction: column;
  flex: 1; /* 让每列平分容器宽度 */
}

.column > .row {
  flex: 1; /* 让每行平分列的高度，形成正方形 */
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center; /* 可选：让文本居中 */
}

2. 优化JavaScript逻辑 #

添加清除原有网格的功能，方便后续调整尺寸：

function makeGrids(size) {
  let screen = document.querySelector(".sketch-screen");
  // 先清除原有网格，避免重复创建
  screen.innerHTML = "";
  
  for (let i = 0; i < size; i++) {
    let column = document.createElement("div");
    column.classList.add("column");
    for (let j = 1; j <= size; j++) {
      let row = document.createElement("div");
      row.classList.add("row");
      row.innerText = (i * size) + j;
      column.appendChild(row);
    }
    screen.appendChild(column);
  }
}

// 初始化16×16网格
makeGrids(16);

// 示例：添加调整网格尺寸的功能
function resizeGrid(newSize) {
  if (newSize > 0) makeGrids(newSize);
}
// 调用示例：resizeGrid(32) 会生成32×32网格

完整代码示例 #

<div class="container">
  <div class="sketch-container">
    <div class="sketch-screen">
    </div>
  </div>
</div>
<footer>
  <p>Design by 2023</p>
</footer>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #7d7d7d;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  background-color: #555454;
  padding: 12px;
  margin-top: 16px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.sketch-container {
  display: flex;
  justify-content: center;
  width: 800px;
  height: 800px;
  background-color: #991101;
  padding-top: 50px;
}

.sketch-screen {
  display: flex;
  flex-direction: row;
  width: 600px;
  height: 600px;
  background-color: #bfbfbf;
}

.sketch-screen > .column {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.column > .row {
  flex: 1;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<script>
function makeGrids(size) {
  let screen = document.querySelector(".sketch-screen");
  screen.innerHTML = "";
  
  for (let i = 0; i < size; i++) {
    let column = document.createElement("div");
    column.classList.add("column");
    for (let j = 1; j <= size; j++) {
      let row = document.createElement("div");
      row.classList.add("row");
      row.innerText = (i * size) + j;
      column.appendChild(row);
    }
    screen.appendChild(column);
  }
}

makeGrids(16);
</script>

效果说明 #

• 网格会完全填满.sketch-screen容器，无间隙
• 每个单元格自动保持正方形，后续调整网格尺寸时仍能维持比例
• 边框不会导致单元格超出容器范围

内容的提问来源于stack exchange，提问作者匿名用户