如何用JS和CSS创建动态网格？WordPress网格列异常问题排查

我用JS和CSS创建动态网格时遇到问题：所有单元格挤在同一列，无法显示多列（如图所示）。代码在在线编辑器中运行正常，但在WordPress网站中失效。

问题排查与解决思路 #

WordPress环境下出现该问题，核心原因集中在样式覆盖、CSS解析错误、JS执行时机这几点，以下是针对性解决方法：

解决步骤 #

1. 修复CSS语法错误并强制布局优先级
   原CSS中1 fr的空格会导致解析异常，且WordPress主题/插件样式可能覆盖display: grid，修改后代码：

   #container {
       overflow: hidden;
       width: 100%;
       display: grid !important;
       grid-gap: 1px;
       grid-template-rows: repeat(var(--grid-rows), 1fr);
       grid-template-columns: repeat(var(--grid-cols), 1fr);
       float: left;
       background-color: gray;
   }
   
   .grid-item {
       padding: 1px;
       border: 1px solid #ddd;
       text-align: center;
   }
   

2. 确保JS在DOM加载完成后执行
   WordPress中JS可能提前执行导致找不到容器元素，同时避免全局变量污染，修改JS代码：

   document.addEventListener('DOMContentLoaded', function() {
       function makeRows(rows, cols) {
           var colors = [];
           while (colors.length < (rows * cols)) {
               do {
                   var color = Math.floor((Math.random()*1000000)+1);
               } while (colors.indexOf(color) >= 0);
               colors.push("#" + ("000000" + color.toString(16)).slice(-6));
           }
           const container = document.getElementById('container');
           container.style.setProperty('--grid-rows', rows);
           container.style.setProperty('--grid-cols', cols);
           for (let c = 0; c < (rows * cols); c++) {
               let cell = document.createElement("div");
               cell.innerText = (c + 1);
               cell.style.background = colors[c];
               cell.className = "grid-item";
               container.appendChild(cell);
           };
       };
       makeRows(2, 2);
   });
   

3. 验证布局兼容性（可选）
   如果CSS变量仍不生效，可临时替换为静态值确认布局逻辑：

   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(2, 1fr);
   

   正常显示后再换回变量方式。

4. 排查样式冲突
   打开浏览器开发者工具（F12），查看#container的computed样式，若display: grid被划掉，说明被其他样式覆盖，可使用更具体的选择器（如body #container）提升优先级。

修正后的完整代码 #

HTML #

<div id="container"></div>

CSS #

#container {
    overflow: hidden;
    width: 100%;
    display: grid !important;
    grid-gap: 1px;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    float: left;
    background-color: gray;
}

.grid-item {
    padding: 1px;
    border: 1px solid #ddd;
    text-align: center;
}

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
    function makeRows(rows, cols) {
        var colors = [];
        while (colors.length < (rows * cols)) {
            do {
                var color = Math.floor((Math.random()*1000000)+1);
            } while (colors.indexOf(color) >= 0);
            colors.push("#" + ("000000" + color.toString(16)).slice(-6));
        }
        const container = document.getElementById('container');
        container.style.setProperty('--grid-rows', rows);
        container.style.setProperty('--grid-cols', cols);
        for (let c = 0; c < (rows * cols); c++) {
            let cell = document.createElement("div");
            cell.innerText = (c + 1);
            cell.style.background = colors[c];
            cell.className = "grid-item";
            container.appendChild(cell);
        };
    };
    makeRows(2, 2);
});

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