配置化Grid布局问题：元素宽高设置未生效的原因？

我尝试创建可配置位置与尺寸的Grid布局系统，但遇到问题：元素的宽高设置未生效，所有元素始终保持1x1大小，首个元素无法占用2x1的空间。

实现代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Full-Height Grid System</title>
</head>
<body>
  <div id="grid-container"></div>
  <script src="script.js"></script>
</body>
</html>

CSS

body, html {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#grid-container {
  display: grid;
  height: 100vh;
  /*gap: 1px; /* Optional: Add gap between grid items */
}

.grid-item {
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

const items = [{
    x: 0,
    y: 0,
    w: 2,
    h: 1
}, {
    x: 2,
    y: 2,
    w: 1,
    h: 1
}, {
    x: 3,
    y: 3,
    w: 1,
    h: 1
}];

document.addEventListener("DOMContentLoaded", () => {
    let numCols = 3;
    let numRows = 3;
    let gridContainer = document.getElementById("grid-container");

    gridContainer.style.gridTemplateColumns = `repeat(${numCols}, 1fr)`;
    gridContainer.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;

    items.forEach((obj, i) => {
        let elem = document.createElement("div");
        elem.classList.add("grid-item");
        elem.textContent = `#${i} - ${obj.x}, ${obj.y}`;

        // 原错误代码
        elem.style.gridRow = `${obj.x} / span ${obj.w}`;
        elem.style.gridColumn = `${obj.y} / span ${obj.h}`;

        gridContainer.appendChild(elem);
    });
});

实际效果 #

期望效果 #

问题原因与修复方案 #

核心问题 #

1. 行和列的属性对应错误：gridRow控制垂直方向（行）的位置与跨度，应对应数据里的y（垂直位置）和h（行高度）；gridColumn控制水平方向（列）的位置与跨度，应对应x（水平位置）和w（列宽度），原代码完全弄反了两者的对应关系。
2. Grid索引起始值错误：CSS Grid的行/列索引是从1开始的，不是0，原代码用0作为起始位置会被浏览器自动修正为1，导致位置和跨度计算全部出错。

修复步骤 #

修改JavaScript中设置元素位置的代码：

// 修正行和列的对应关系，同时将0起始索引转为1起始
elem.style.gridRow = `${obj.y + 1} / span ${obj.h}`;
elem.style.gridColumn = `${obj.x + 1} / span ${obj.w}`;

另外，原数据中第三个元素的x:3超出了设置的3列网格范围（列索引最大为3，span 1会导致元素溢出），建议将其x改为2，或者把numCols调整为4，避免元素被挤出网格。

修复后完整JavaScript代码 #

const items = [{
    x: 0,
    y: 0,
    w: 2,
    h: 1
}, {
    x: 2,
    y: 2,
    w: 1,
    h: 1
}, {
    x: 2, // 修正为有效列索引
    y: 3,
    w: 1,
    h: 1
}];

document.addEventListener("DOMContentLoaded", () => {
    let numCols = 3;
    let numRows = 4; // 对应y:3的行索引，调整为4行
    let gridContainer = document.getElementById("grid-container");

    gridContainer.style.gridTemplateColumns = `repeat(${numCols}, 1fr)`;
    gridContainer.style.gridTemplateRows = `repeat(${numRows}, 1fr)`;

    items.forEach((obj, i) => {
        let elem = document.createElement("div");
        elem.classList.add("grid-item");
        elem.textContent = `#${i} - ${obj.x}, ${obj.y}`;

        // 修正后的位置设置
        elem.style.gridRow = `${obj.y + 1} / span ${obj.h}`;
        elem.style.gridColumn = `${obj.x + 1} / span ${obj.w}`;

        gridContainer.appendChild(elem);
    });
});

修复后，首个元素会从第1列开始横跨2列，高度占1行，完全符合期望效果。

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