自定义网格（默认16×16）单元格间出现间隙的原因咨询

你遇到的网格单元格间隙问题，根源是inline-block元素的默认行为：浏览器会将inline-block元素视为行内元素，保留元素之间的空白字符（比如代码中动态创建元素时产生的隐性换行/空格），这些空白会被渲染成可见的间隙。

下面提供三种实用的解决方案：

方案1：消除容器的空白字符影响 #

给容器设置font-size: 0，彻底消除空白字符的渲染空间，同时给网格单元格重置字体大小（避免继承0导致后续内容无法显示）：

修改后的CSS：

#container{
    position: relative;
    margin: auto;
    width: 800px;
    height: 800px;
    border: none;
    outline: 2px solid red;
    padding: 0;
    font-size: 0; /* 消除空白间隙 */
}

.grid{
    margin: 0;
    padding: 0;
    outline: 1px solid black;
    border: none;
    display: inline-block;
    font-size: 16px; /* 重置字体大小 */
}

方案2：改用Flexbox布局 #

Flexbox是更现代的布局方式，天生不会产生inline-block的空白间隙，只需给容器添加Flex属性即可：

修改后的CSS：

#container{
    position: relative;
    margin: auto;
    width: 800px;
    height: 800px;
    border: none;
    outline: 2px solid red;
    padding: 0;
    display: flex; /* 启用Flex布局 */
    flex-wrap: wrap; /* 允许单元格换行 */
}

.grid{
    margin: 0;
    padding: 0;
    outline: 1px solid black;
    border: none;
    /* 移除display: inline-block */
}

JavaScript部分不需要修改，Flex会自动填满容器，现有JS计算宽高的逻辑也可保留，不影响布局效果。

方案3：改用Grid布局（推荐） #

Grid布局专为网格场景设计，代码更简洁，无需手动计算单元格尺寸：

修改CSS #

#container{
    position: relative;
    margin: auto;
    width: 800px;
    height: 800px;
    border: none;
    outline: 2px solid red;
    padding: 0;
    display: grid; /* 启用Grid布局 */
    grid-template-columns: repeat(var(--grid-rows), 1fr); /* 用CSS变量动态定义列数 */
    grid-template-rows: repeat(var(--grid-rows), 1fr); /* 用CSS变量动态定义行数 */
}

.grid{
    margin: 0;
    padding: 0;
    outline: 1px solid black;
    border: none;
}

修改JavaScript的createGrid函数 #

function createGrid(rows){
    rows = parseInt(rows);
    container.innerHTML = "";
    // 通过CSS变量设置网格行列数
    container.style.setProperty('--grid-rows', rows);

    for(let i = 0; i < rows * rows; i++){
        const div = document.createElement("div");
        div.className = `grid`;
        container.appendChild(div);
    }
    // 移除动态设置宽高的代码，Grid会自动分配尺寸
}

这种方式彻底摆脱了手动计算宽高的麻烦，布局逻辑更清晰。

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