CSS如何固定网格总占用像素尺寸，不随网格单元格数量变化？

你的实现存在3个核心问题，导致网格总尺寸随单元格数量变化：

• 给单元格.div-style写死了25px*25px的固定宽高，同时设置了3px的白色边框，默认盒模型下边框会额外占据空间，单元格总数越多，累加的总尺寸越大
• 给单元格设置了flex: 1 1 auto，这个属性会让元素优先按照自身设定的宽高渲染，剩余空间才会伸缩，无法实现按容器尺寸自动平分
• 没有给网格容器.grid-body设置固定宽高，容器默认会被内部内容撑开，自然随内容尺寸变化
• （额外问题）JS生成新网格前没有清空旧内容，多次触发生成逻辑会导致网格堆叠，尺寸异常变大

1. 统一盒模型，固定网格容器尺寸 #

首先全局设置box-sizing: border-box，让边框、内边距都算在元素设定的宽高范围内，不会额外撑大元素；再给网格容器设置你需要的固定宽高，让它作为网格的尺寸边界：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.grid-body {
  /* 按你的需求设定固定尺寸即可，示例用常见的500px画板尺寸 */
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
}

2. 调整行和单元格的flex规则，移除固定宽高 #

不要给单元格写死宽高，通过flex属性让行和单元格自动平分容器的可用空间：

.div-row {
  display: flex;
  /* 所有行平分容器总高度，n行就把高度等分为n份 */
  flex: 1 1 0;
}

.div-style {
  /* 所有单元格平分当前行的总宽度，n列就把行宽等分为n份 */
  flex: 1 1 0;
  background-color: rgb(0, 0, 0);
  /* 边框宽度可以按需调整，开启border-box后不会额外撑大尺寸 */
  border: solid 1px rgb(255, 255, 255);
}

3. 补全JS清空逻辑 #

每次生成新网格前先清空容器内的旧内容，避免网格堆叠：

// 替换你之前代码里的body变量，不要直接往body插入网格
const gridContainer = document.querySelector('.grid-body');
function createGrid(maxGrid = 16) {
  // 清空旧网格
  gridContainer.innerHTML = '';
  for (let i = 0; i < maxGrid; i++) {
    const divRow = document.createElement('div');
    divRow.classList.add('div-row');
    for (let j = 0; j < maxGrid; j++) {
      const div = document.createElement('div');
      div.classList.add('div-style');
      divRow.appendChild(div);
    }
    gridContainer.appendChild(divRow);
  }
  addColorOnGrid();
}

说明：修复后无论你设置多少数量的网格（比如1616、3232、100*100），网格容器都会保持你设定的固定宽高，单元格会自动调整尺寸适配容器，不会再出现总尺寸变化的问题。

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