创建包含可配置项目的网格

Question

我尝试创建一个带有可配置项的网格系统来设置位置和大小。问题是，高度/宽度设置对网格项目没有影响。它们的大小都与 1x1 相同，并且第一个项目不占用 2x1:

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}`;

        // Set the position dynamically
        elem.style.gridRow = `${obj.x} / span ${obj.w}`;
        elem.style.gridColumn = `${obj.y} / span ${obj.h}`;

        gridContainer.appendChild(elem);

    });

});

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;
}

<!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>

为什么第一个元素的宽度设置被忽略？

实际结果：

想要的结果：

Answer 1

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 = 4; // Adjusted for item spanning 2 columns
  let numRows = 4; // Adjusted for item spanning 1 row

  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}`;

    // Set position and size dynamically
    elem.style.gridColumn = `${obj.x}`;
    elem.style.gridRow = `${obj.y}`;
    elem.style.gridColumnEnd = `span ${obj.w}`;
    elem.style.gridRowEnd = `span ${obj.h}`;

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

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;
}

<!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>

使用

grid-column-end

和

grid-row-end

设置项目尺寸和调整

numCols

和

numRows

以匹配项目数组中的最大跨度

创建包含可配置项目的网格

问题描述投票：0回答：1

1个回答

最新问题

创建包含可配置项目的网格

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1