如何让动态生成的Div网格自适应填充固定尺寸容器？

解决思路 #

用CSS Flexbox的弹性布局特性，让生成的网格行和单元格自动平分容器的宽高，再配合JS封装网格生成逻辑，不管你设置多少个单元格（1-100），都能刚好填满固定尺寸的容器，不会溢出也不会留空白。

具体修改步骤 #

1. 调整CSS（最关键的部分） #

把现有CSS改成下面这样，利用Flex的flex:1属性让元素自动分配空间：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    background-color: black;
    min-height: 100vh; /* 让body占满整个视窗高度，垂直居中更稳 */
}

.grid-container {
    margin-top: 10%;
    display: flex;
    flex-direction: column; /* 把行改成垂直排列 */
    width: 750px;
    height: 750px;
    overflow: hidden; /* 防止边框溢出导致出现滚动条 */
}

.grid-row {
    display: flex; /* 让每行里的单元格横向排列 */
    flex: 1; /* 每行平分容器的高度 */
}

.square {
    flex: 1; /* 每个单元格平分所在行的宽度 */
    border: 1px dashed white;
    box-sizing: border-box; /* 把边框算进单元格的宽高里，避免溢出容器 */
    /* 删掉原来固定的width和height */
}

.hov-square {
    background-color: grey;
}

2. 优化JS代码（让网格生成更灵活） #

把网格生成逻辑封装成函数，方便随时修改单元格数量，同时避免重复DOM操作：

const container = document.querySelector(".grid-container");

// 生成网格的函数，参数是每边的单元格数量（1-100）
function generateGrid(size) {
    // 先清空容器，避免多次生成叠加
    container.innerHTML = '';
    for (let x = 0; x < size; x++) { 
        let newRow = document.createElement('div');
        newRow.classList.add('grid-row');
        container.appendChild(newRow);
        for (let y = 0; y < size; y++) {
            let square = document.createElement('div');
            square.classList.add('square');
            newRow.appendChild(square);
            // 直接在生成单元格时添加鼠标事件，不用后续再查询所有单元格
            square.addEventListener("mouseover", () => {
                square.classList.add("hov-square");
            });
        }
    }
}

// 调用函数生成6x6的网格，你可以改成100以内的任意数字
generateGrid(6);

3. HTML保持原样 #

原来的HTML结构不用改，直接用就行。

效果验证 #

不管你把generateGrid的参数设成1还是100，网格都会完美填满750x750的容器，每个单元格都是正方形，边框也不会导致容器溢出。

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